Wer eine neue Website aufbaut, kümmert sich zuerst um Layout, Inhalte und Ladezeiten. Das Favicon landet dabei gern ganz unten auf der Liste. Dabei ist dieses winzige Icon das Erste, was ein Nutzer sieht, wenn er mehrere Browser-Tabs offen hat. Fehlt es oder zeigt es nur das generische Browser-Symbol, wirkt eine Seite unfertig. Das ist kein ästhetisches Detail, sondern eine Frage der Glaubwürdigkeit.
Was ein Favicon überhaupt leisten muss
Ein Favicon erscheint nicht nur im Browser-Tab. Es taucht in der Lesezeichenleiste auf, in der Browser-Historie, auf dem Homescreen von Mobilgeräten und seit einigen Jahren auch in den Suchergebnissen von Google. Letzteres ist relevant: Google zeigt seit 2019 Favicons in den mobilen Suchergebnissen direkt neben der Domain an. Ein schlecht skaliertes oder fehlendes Icon kann dort negativ auffallen.
Die technische Anforderung ist deshalb größer als viele denken. Es reicht längst nicht mehr, eine einzige 16×16-Pixel-Datei bereitzustellen. Moderne Browser und Betriebssysteme fragen verschiedene Größen und Formate ab, je nach Kontext.
Die wichtigsten Formate und Größen
Wer es richtig machen will, braucht mehrere Varianten. Hier ein Überblick über die relevanten Größen:
- 16×16 px – klassische Browser-Tab-Darstellung
- 32×32 px – Taskleiste unter Windows, Lesezeichen-Manager
- 48×48 px – Windows-Verknüpfungen auf dem Desktop
- 180×180 px – Apple Touch Icon für iOS-Homescreen
- 192×192 px – Android Chrome, PWA-Manifest
- 512×512 px – Splash-Screen bei Progressive Web Apps
Das klassische Format ist ICO, weil Internet Explorer es bis in den Tod verteidigt hat und ältere Systeme es noch erwarten. Moderne Browser verstehen aber auch PNG problemlos, und SVG-Favicons werden von Firefox und Chrome seit 2020 bzw. 2021 unterstützt. SVG hat den Vorteil, dass es verlustfrei auf jede Größe skaliert, was besonders für einfache Icon-Designs wie Buchstaben oder geometrische Formen sinnvoll ist.
Von der Vorlage zur fertigen Datei
Ausgangspunkt sollte immer eine vektorbasierte Datei sein, idealerweise aus Illustrator, Figma oder Inkscape. Wer direkt aus einem 16×16-Pixel-Raster arbeitet, verliert bei größeren Ausgabegrößen an Qualität. Besser: Das Logo oder ein vereinfachtes Symbol als SVG exportieren, dann in alle benötigten Rastergrößen umwandeln.
Für die Konvertierung muss man kein Grafikprogramm kaufen. Es gibt browserbasierte Tools, die das erledigen. Ein gängiger Weg ist, die SVG- oder PNG-Datei in einen Favicon-Generator zu laden und daraus ein komplettes Paket mit allen gängigen Größen und einer fertigen ICO-Datei zu erzeugen. Das spart die manuelle Exportarbeit für jede einzelne Variante.
Wichtig beim Ausgangsmotiv: Ein Favicon wird in der Regel auf dunklem oder hellem Hintergrund angezeigt, je nach Systemeinstellung des Nutzers. Wer ein Icon mit transparentem Hintergrund erstellt, sollte prüfen, ob es in beiden Farbmodi lesbar bleibt. Ein weißes Logo auf transparentem Grund verschwindet im Light-Mode des Browsers schlicht.
Einbindung im HTML-Dokument
Die Dateien allein reichen nicht. Browser müssen wissen, wo sie die Icons finden. Einige suchen automatisch nach einer Datei namens favicon.ico im Stammverzeichnis der Domain. Das funktioniert für einfache Fälle, deckt aber nicht alle Szenarien ab.
Die saubere Lösung sind explizite Link-Tags im <head>-Bereich jeder HTML-Seite. Ein vollständiges Beispiel sieht so aus:
| Tag | Zweck |
|---|---|
| <link rel=“icon“ type=“image/x-icon“ href=“/favicon.ico“> | Klassisches ICO für ältere Browser |
| <link rel=“icon“ type=“image/png“ sizes=“32×32″ href=“/favicon-32×32.png“> | PNG für moderne Desktop-Browser |
| <link rel=“apple-touch-icon“ sizes=“180×180″ href=“/apple-touch-icon.png“> | iOS-Homescreen |
| <link rel=“manifest“ href=“/site.webmanifest“> | PWA-Manifest mit Android-Icons |
Das Web-Manifest ist eine JSON-Datei, die unter anderem die 192×192- und 512×512-Icons referenziert. Wer eine Progressive Web App betreibt oder auch nur möchte, dass Android-Nutzer ein ordentliches Homescreen-Icon bekommen, kommt an dieser Datei nicht vorbei. Der Inhalt ist überschaubar: Name der App, Hintergrundfarbe, Theme-Color und die Icon-Pfade.
Häufige Fehler und wie man sie vermeidet
Der verbreitetste Fehler ist ein falscher Dateipfad. Browser zeigen keinen Fehler an, wenn ein Favicon nicht gefunden wird. Sie zeigen einfach nichts oder das Standard-Icon. Wer unsicher ist, öffnet die Browser-Entwicklertools und schaut im Netzwerk-Tab nach, ob die Icon-Anfragen mit Status 200 beantwortet werden oder ob 404-Fehler auftauchen.
Ein weiterer Klassiker: Das Favicon wurde aktualisiert, aber der Browser zeigt noch die alte Version. Das liegt am Cache. Für Tests hilft ein Hard-Reload mit Strg+Shift+R, für Produktivseiten hilft ein neuer Dateiname mit Versionsnummer, also etwa favicon-v2.ico mit angepasstem Link-Tag. So wird der Cache des Nutzers umgangen.
Wer WordPress oder ein anderes CMS einsetzt, findet dort meist eine eigene Funktion zum Hochladen des Site-Icons. Das WordPress-Customizer-Feld für das Website-Icon generiert automatisch die nötigen Größen. Trotzdem lohnt ein Blick in den Quellcode der fertigen Seite, um zu prüfen, ob alle relevanten Tags tatsächlich gesetzt werden.
SVG als Zukunftsformat
SVG-Favicons bieten eine interessante Ergänzung für Seiten, die auf aktuelle Browser setzen. Mit einem einzigen SVG lässt sich per CSS-Media-Query sogar auf den Dark-Mode des Betriebssystems reagieren. Ein schwarzes Logo kann im Dark-Mode automatisch weiß erscheinen, ohne dass mehrere Dateien nötig wären. Die Browser-Unterstützung ist noch nicht vollständig, weshalb SVG-Favicons aktuell sinnvoller als Ergänzung zu PNG und ICO funktionieren, nicht als Ersatz.
Für die meisten Websites gilt eine pragmatische Empfehlung: favicon.ico im Stammverzeichnis für Altlasten, zwei bis drei PNG-Varianten per Link-Tag eingebunden, Apple Touch Icon und ein schlankes Web-Manifest. Das deckt über 95 Prozent aller Nutzersituationen ab, ohne übermäßigen Aufwand zu erzeugen. Wer diesen Stand einmal sauber umgesetzt hat, muss sich damit in der Regel jahrelang nicht mehr beschäftigen.
