Ein Favicon (von englisch „Favorites Icon") ist das kleine Icon, das im Browser-Tab einer Website, in der Lesezeichenliste, in der Adressleiste und auf mobilen Homescreens angezeigt wird und eine Website visuell identifiziert.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Browser-Icon, Tab-Icon, Shortcut-Icon, Website-Icon
Was ist ein Favicon?
Das Wort „Favicon" setzt sich aus „Favorite" und „Icon" zusammen und wurde 1999 von Microsoft Internet Explorer eingeführt. Damals erschien das Icon erstmals neben dem Website-Namen in der Lesezeichenliste. Seitdem ist das Favicon zu einem selbstverständlichen Bestandteil jeder Website geworden: Wer mehrere Tabs im Browser geöffnet hat, erkennt Websites hauptsächlich über ihr kleines Icon – nicht über den Tab-Text, der bei vielen offenen Tabs abgeschnitten wird. Ein fehlendes oder generisches Favicon (das Standardbrowser-Icon) signalisiert Nutzenden und Suchmaschinen mangelnde Professionalität.
Erklärung
Favicons erscheinen in zahlreichen Kontexten mit unterschiedlichen Anforderungen:
Browser-Tab: Hier ist das Favicon 16 × 16 oder 32 × 32 Pixel groß – eine extrem kleine Fläche, auf der nur ein markantes, einfaches Symbol erkennbar ist.
Lesezeichenleiste: Etwas mehr Platz; 32 × 32 oder 64 × 64 Pixel.
Pinned Tabs (Safari, Chrome): Wenn eine Website in einem fixierten Tab gespeichert wird, erscheint nur das Favicon – hier in 16 × 16 Pixel Größe.
Apple Touch Icon: Wenn Nutzende eine Website auf dem iPhone-Homescreen speichern, erscheint das „Touch Icon" – 180 × 180 Pixel, definiert über <link rel="apple-touch-icon"> im HTML.
Android Homescreen Icon: Vergleichbar mit dem Apple Touch Icon, wird über das Web App Manifest und PWA-Konfiguration gesteuert.
Suchergebnisse (Google): Seit 2019 zeigt Google in mobilen Suchergebnissen das Favicon neben dem Website-Namen – eine zusätzliche Sichtbarkeit, die professionelle Favicons wichtiger gemacht hat.
Technische Umsetzung: Das klassische Favicon-Format ist .ico, das mehrere Pixelgrößen in einer Datei kombiniert. Moderne Browser unterstützen jedoch auch SVG (skalierbar, unterstützt Dark Mode) und PNG. Typischer HTML-Code: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Für maximale Kompatibilität werden eine .ico-Datei (16 und 32 Pixel) sowie PNG-Varianten und ein Apple Touch Icon bereitgestellt.
Gestaltungsprinzipien: Ein Favicon muss auf 16 × 16 Pixel erkennbar sein. Komplexe Logos mit Text oder feinen Details scheitern auf dieser Größe. Bewährte Lösungen: Ein einzelner Buchstabe (erster Buchstabe der Marke), ein einfaches grafisches Symbol oder eine stark vereinfachte Version des Logos. Farbe und Form müssen auch auf hellen und dunklen Browser-Themes funktionieren.
Beispiele
- Google: Das farbige „G" auf weißem Hintergrund – sofort erkennbar, einfach, markant.
- YouTube: Das rote Play-Button-Symbol, auch ohne den YouTube-Schriftzug sofort identifizierbar.
- GitHub: Das schwarze Octocat-Symbol (Oktopus-Katze) – ein Maskottchen, das zum Favicon optimiert wurde.
- Wikipedia: Das Puzzleteil-Globus-Symbol funktioniert auf 16 × 16 Pixel erstaunlich gut – erkennbar und charakteristisch.
- Nachrichtenportal (Beispiel): Ein Nachrichtenportal nutzt sein Kürzel (z. B. „SZ" für Süddeutsche Zeitung) auf einem farbigen Hintergrund als Favicon – klar und markenkonform.
In der Praxis
Favicons werden heute mit Tools wie RealFaviconGenerator.net erstellt, die aus einer Quelldatei (idealerweise SVG oder hochauflösendes PNG) alle benötigten Größen und Formate generieren und den benötigten HTML-Code ausgeben. Der empfohlene Workflow: Logo oder Icon in SVG vorbereiten → in RealFaviconGenerator hochladen → Paket herunterladen → in den head der Website einbinden. Für PWAs (Progressive Web Apps) wird zusätzlich ein Web App Manifest (manifest.json) mit App-Icons in verschiedenen Größen benötigt. SVG-Favicons unterstützen Dark Mode über CSS media queries – ein Favicon kann sich so an den Systemdunkelmodus anpassen.
Vergleich & Abgrenzung
Favicon vs. App Icon: Das Favicon ist für Browser und Websites; App Icons sind für mobile Anwendungen (iOS/Android). Beide dienen als kompakte Markenzeichen, haben aber unterschiedliche Größen, Formate und technische Anforderungen. Favicon vs. Logo: Ein Logo kann komplex sein und Text enthalten; ein Favicon ist eine auf winzige Größen optimierte Ableitung des Logos oder der Bildmarke. `.ico` vs. SVG-Favicon: Das .ico-Format ist alt und enthält Pixelbilder in mehreren Größen; SVG-Favicons sind skalierbar, kleiner in der Dateigröße und unterstützen Dark Mode – die modernere Option für neuere Browser.
Häufige Fragen (FAQ)
Warum zeigt mein Browser noch das alte Favicon nach einem Update? Browser cachen Favicons aggressiv. Nach einem Favicon-Update kann es sein, dass das alte Icon noch Stunden oder Tage im Cache gespeichert ist. Lösung: Browser-Cache leeren (Strg+Shift+R / Cmd+Shift+R) oder in einem anderen Browser testen.
Muss ein Favicon immer quadratisch sein? Ja – Browser und Betriebssysteme erwarten quadratische Favicons (1:1 Seitenverhältnis) und schneiden andere Formate ab oder verzerren sie. Das finale dargestellte Icon kann durch das Betriebssystem eine andere Form erhalten (z. B. runde Icons auf manchen Android-Geräten), aber die Quelldatei muss quadratisch sein.
Verwandte Einträge
Weiterführend
- Coyier, C. (2021): Favicons – How to Create and Use Them. CSS-Tricks (Online-Artikel, css-tricks.com).
- Bidelman, E. (2023): SVG Favicons. web.dev (Google, online).
- RealFaviconGenerator (2024): Favicon Generator. realfavicongenerator.net.
