Favicon

Ein Favicon ist ein kleines Symbol, meist 16 × 16 oder 32 × 32 Pixel groß, das eine Website in Browser-Tabs, Lesezeichen und Suchergebnissen kennzeichnet. Es gehört zu den sichtbarsten Markenelementen im Web.

Related workflow terms: Open-Graph-Bild, Bildformat.

Favicon-Formate und -Größen

Aus der einzelnen 16 × 16 Pixel großen ICO-Datei ist mit der Zeit ein Satz von Bildern in verschiedenen Formaten und Größen geworden. Jede Variante ist für einen anderen Einsatz gedacht.

ICO (favicon.ico) ist das ältere Format. Eine Datei kann mehrere Bildgrößen enthalten, etwa 16 × 16, 32 × 32 und 48 × 48 Pixel. Browser suchen im Stammverzeichnis einer Website automatisch nach /favicon.ico, selbst wenn kein Link-Tag darauf verweist. Für ältere Browser und einige Unternehmensumgebungen bleibt ICO erforderlich.

PNG ist das verbreitetste moderne Format. Einzelne PNG-Dateien in festgelegten Größen wie 32 × 32, 192 × 192 und 512 × 512 Pixel werden über <link>-Tags im HTML-Head eingebunden. PNG unterstützt Transparenz und funktioniert in allen aktuellen Browsern.

SVG ist die flexibelste Variante. Ein einziges SVG-Favicon lässt sich ohne sichtbare Pixel skalieren. Es kann zudem CSS enthalten, einschließlich @media (prefers-color-scheme: dark). So passt sich das Favicon automatisch an, wenn jemand zwischen hellem und dunklem Modus wechselt. Chrome, Firefox und Edge unterstützen SVG-Favicons.

Das Apple-Touch-Icon ist eine PNG-Datei mit 180 × 180 Pixeln. iOS verwendet sie, wenn eine Website zum Home-Bildschirm hinzugefügt wird. Eingebunden wird sie mit <link rel="apple-touch-icon">; dargestellt wird sie als abgerundetes App-Symbol.

Eine vollständige Favicon-Ausstattung besteht üblicherweise aus einem 32 × 32 Pixel großen PNG für Browser-Tabs, einem 180 × 180 Pixel großen PNG für Apple-Geräte, PNG-Dateien mit 192 × 192 und 512 × 512 Pixeln für Android- und PWA-Manifeste, einem skalierbaren SVG mit Unterstützung für den Dunkelmodus und einer älteren favicon.ico-Datei als Rückfalllösung.

Wo Favicons erscheinen

Favicons sind an mehr Stellen sichtbar, als viele Entwickler vermuten:

• Browser-Tabs: Dort erscheinen sie in 16 × 16 oder 32 × 32 Pixeln neben dem Seitentitel. Bei schmalen Tabs bleibt in modernen Browsern unter Umständen nur noch das Favicon sichtbar.
• Lesezeichen und Leselisten: Gespeicherte Seiten zeigen das Favicon als visuelles Erkennungsmerkmal. Das erleichtert die Suche in langen Listen.
• Browserverlauf: Zuletzt besuchte Seiten führen Favicons neben Titel und URL auf.
• Suchergebnisse: Google und Bing zeigen Favicons neben Treffern. So bleibt das kleine Markenelement dauerhaft sichtbar.
• PWA und mobile Home-Bildschirme: Progressive Web Apps und „Zum Home-Bildschirm hinzufügen“ verwenden größere Favicon-Varianten als App-Symbol.
• Tabgruppen und Tabmanager: Browserfunktionen zum Ordnen von Tabs nutzen Favicons als wichtigstes visuelles Unterscheidungsmerkmal zwischen Websites.

Ein Favicon erstellen

Beginne mit einem einfachen, klar erkennbaren Motiv. Ein Favicon muss bei 16 × 16 Pixeln lesbar bleiben. Aufwendige Logos, detaillierte Illustrationen und viel Text funktionieren in dieser Größe nicht. Am besten eignen sich kräftige Formen, deutliche Kontraste und wenige Details.

Entwirf das Symbol zunächst groß, etwa mit 512 × 512 Pixeln oder mehr, und verkleinere es danach. So kannst du prüfen, ob der Entwurf in jeder erforderlichen Größe funktioniert. Sieh dir die verkleinerten Varianten in ihrer tatsächlichen Anzeigegröße an und kontrolliere besonders die Lesbarkeit im Browser-Tab.

In automatisierten Abläufen kann ein Screenshot eines gestalteten HTML-Elements als Ausgangsbild dienen, zum Beispiel ein farbiger Buchstabe, eine einfache SVG-Form oder ein Markensymbol. Dieses Bild wird anschließend auf die erforderlichen Abmessungen skaliert und in die benötigten Formate exportiert. Auf diese Weise lassen sich Favicons als Teil der Build-Pipeline programmatisch erstellen und aktualisieren.

Ein Favicon-Generator kann aus einem einzigen Ausgangsbild alle benötigten Größen und Formate sowie den passenden HTML-Code erzeugen.

In einem echten Veröffentlichungsablauf

Favicons bleiben am leichtesten konsistent, wenn sie auf derselben Quelldatei wie das übrige visuelle System der Website beruhen. Statt favicon.ico, Touch-Icons und Manifest-Symbole einzeln zu exportieren, kann ein Team eine hochauflösende Vorlage pflegen und daraus bei der Veröffentlichung alle Größen ableiten. So weichen Tabs, Lesezeichen, PWAs und Suchergebnisse nicht nach und nach voneinander ab.

Häufige Fehler

• Nur favicon.ico verwenden: Eine einzelne ICO-Datei deckt weder Apple-Touch-Icons noch Android-Manifest-Symbole oder den SVG-Dunkelmodus ab. Stelle für eine einheitliche Darstellung auf allen Plattformen den vollständigen Satz an Formaten und Größen bereit.
• Zu viele Details einbauen: Im Browser-Tab wird ein Favicon mit 16 × 16 Pixeln dargestellt. Feine Linien, kleine Schrift und komplexe Formen verschwimmen. Reduziere den Entwurf auf sein eindeutigstes Element.
• Transparenz vergessen: Ohne transparenten Hintergrund erscheint hinter dem Symbol ein einfarbiges Rechteck, das sich von Browseroberfläche und Lesezeichenleiste absetzt. Nutze PNG oder SVG mit transparentem Hintergrund.
• Nicht im Dunkelmodus testen: Ein dunkles Favicon kann vor einer dunklen Tableiste verschwinden. Verwende ein SVG-Favicon mit CSS-Media-Queries für eine helle und eine dunkle Variante oder eine Farbe, die sich von beiden Hintergründen abhebt.
• Caching ignorieren: Browser speichern Favicons hartnäckig zwischen. Hänge nach einer Änderung einen Versionsparameter an die URL oder ändere den Dateinamen, damit Browser die neue Datei abrufen.