Webdesign · Entwicklung · SEO
Favicon
Favicon erklärt: kleines Website-Symbol für Browser und Geräte
Redaktionell geprüft ·
Verständlich erklärt
Ein Favicon ist ein kleines Symbol, das eine Website in Browser-Tabs, Lesezeichen, Verlaufseinträgen und weiteren Benutzeroberflächen kennzeichnet. Es unterstützt Wiedererkennung und Orientierung, insbesondere wenn viele Tabs geöffnet sind. Je nach Plattform können klassische ICO-Dateien, PNG- oder SVG-Symbole und zusätzliche Icons für mobile Startbildschirme benötigt werden.
Das Motiv muss auch in sehr kleinen Größen eindeutig bleiben. Einfache Formen, ausreichender Kontrast und Tests auf hellen und dunklen Oberflächen sind wichtiger als feine Details. Die Dateien werden über HTML-Metadaten beziehungsweise etablierte Pfade referenziert und sollten korrekt ausgeliefert werden. Ein Favicon stärkt die visuelle Marke, ist aber kein direkter Garant für bessere Rankings.
Auf einen Blick
Favicon in der Praxis
Favicons erscheinen in Tabs, Lesezeichen und teils Suchoberflächen. Mehrere Größen, ein schlichtes Motiv und korrekte Verknüpfungen sorgen dafür, dass die Marke auch auf kleiner Fläche erkennbar bleibt.
Ein Oberflächenelement sollte eine erkennbare Funktion haben und sich im gesamten Auftritt gleich verhalten. Zustände für Fokus, Hover, Fehler, Laden und kleine Bildschirme gehören zur Komponente dazu. Die Umsetzung wird zuverlässiger, wenn Inhalt, semantisches Element und visuelle Darstellung getrennt betrachtet werden. So bleibt die Bedienung auch dann verständlich, wenn Animationen fehlen oder Hilfstechnologien genutzt werden.
Favicon: Relevanz für SEO, SEA und GEO
Wiedererkennbare Komponenten verkürzen die Orientierung und machen wichtige Handlungen leichter auffindbar. Das hilft Nutzern aus organischen Treffern ebenso wie aus Anzeigen. Elemente sollten jedoch nicht um Aufmerksamkeit konkurrieren: Eine klare visuelle Hierarchie, aussagekräftige Beschriftungen und zurückhaltende Effekte unterstützen den Weg zur Conversion besser als permanente Bewegung oder mehrere gleich starke Aufforderungen.
Such- und Antwortsysteme können Favicon besser einordnen, wenn Definition, Einsatzgrenzen und Prüfkriterien klar voneinander getrennt sind. Als redaktioneller Bezug dient die Quelle „Link type icon“ von WHATWG; sie macht zentrale Aussagen für Menschen und maschinelle Systeme nachvollziehbar.
Codebeispiel aus der Praxis
Mehrere Favicon-Formate verknüpfen
SVG eignet sich für moderne Browser, ICO als breite Rückfalllösung und das Apple-Touch-Icon für gespeicherte Startbildschirm-Links.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Quellen und weiterführende Informationen
- Standard Link type icon WHATWG · Geprüft
