Ein Favicon (zusammengesetzt aus „Favorites Icon“) ist das kleine Symbol, das Browser in der Tab-Leiste, in der Adresszeile und in der Lesezeichen-Liste neben dem Seitentitel anzeigen und das Websites visuell identifizierbar macht.
Was bedeutet das?
Das Favicon wurde erstmals 1999 von Microsoft Internet Explorer 5 unterstützt und war ursprünglich eine Datei namens favicon.ico im Stammverzeichnis einer Website. Der Browser rief diese Datei automatisch ab und zeigte sie in der Lesezeichenleiste an. Heute ist das Favicon über den HTML-Standard spezifiziert: Im <head>-Bereich eines HTML-Dokuments wird es mit einem <link rel="icon">-Element eingebunden. Moderne Websites liefern das Favicon in mehreren Formaten und Auflösungen aus, um unterschiedliche Anzeigekontexte abzudecken: 16×16 Pixel und 32×32 Pixel für Browser-Tabs, 180×180 Pixel für das Apple-Touch-Icon auf iOS, und 192×192 Pixel oder 512×512 Pixel für Android-Startbildschirme und Progressive-Web-Apps.
Das ICO-Format war lange der Standard, weil es mehrere Bildgrößen in einer Datei bündeln kann. Heute sind PNG und SVG verbreitet, weil sie einfacher zu erzeugen und verlustfrei skalierbar sind. SVG-Favicons haben den Vorteil, dass sie sich in dunklen Browser-Themes automatisch anpassen lassen, wenn entsprechende CSS-Medienabfragen im SVG hinterlegt sind. Das WHATWG HTML Living Standard definiert die gültigen Werte für das rel-Attribut und beschreibt icon als offiziellen Link-Typ.
In WordPress wird das Favicon als „Website-Icon“ oder „Site Icon“ bezeichnet und im Customizer unter „Website-Identität“ hinterlegt. WordPress skaliert das hochgeladene Bild automatisch auf die benötigten Größen und fügt die entsprechenden <link>-Tags in das <head>-Element jeder Seite ein. Voraussetzung ist ein Bild mit einer Mindestgröße von 512×512 Pixeln.
Beispiel aus der Praxis
Sie starten eine neue WordPress-Website für ein Unternehmen. Im WordPress-Backend navigieren Sie zu „Design > Customizer > Website-Identität“ und laden das quadratische Firmenlogo in einer Auflösung von 512×512 Pixeln hoch. WordPress erstellt daraus automatisch die Favicon-Varianten und trägt die notwendigen Meta-Tags ein. Anschließend prüfen Sie in verschiedenen Browsern, ob das Symbol korrekt in der Tab-Leiste erscheint, und testen auf einem mobilen Gerät, ob das Bild beim Hinzufügen zum Startbildschirm korrekt angezeigt wird.
Tipp
Achten Sie darauf, dass das Favicon auch bei sehr kleiner Darstellung erkennbar bleibt. Ein komplexes Logodesign mit feinen Linien und viel Text verliert bei 16×16 Pixeln jede Lesbarkeit. Empfehlenswert ist ein vereinfachtes Signet oder der erste Buchstabe des Markennamens als eigenständige Icon-Variante. Prüfen Sie das Ergebnis in einem echten Browser-Tab und nicht nur in der Vorschau des Grafik-Programms.