Favicon, das kleine Website Icon im Browser-Tab

Ein Favicon (auch Website Icon genannt) ist das kleine, quadratische Symbol, das im Browser-Tab, in der Lesezeichenleiste, in Suchergebnissen und auf mobilen Homescreens eine Website visuell identifiziert.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Website Icon, Browser Icon, Tab Icon, Shortcut Icon, App Touch Icon

Was ist ein Favicon?

Das Wort „Favicon" setzt sich aus „Favorite" und „Icon" zusammen und wurde 1999 mit dem Microsoft Internet Explorer eingeführt. Damals erschien das kleine Symbol erstmals neben dem Website-Namen in der Lesezeichenliste. Seitdem ist das Favicon zu einem selbstverständlichen Bestandteil jeder professionellen Website geworden.

Wer mehrere Browser-Tabs geöffnet hat, erkennt Websites hauptsächlich über ihr kleines Website Icon, nicht über den Tab-Titel, der bei vielen offenen Tabs abgeschnitten wird. Ein fehlendes oder generisches Favicon (das Standard-Browser-Symbol) signalisiert mangelnde Professionalität und beeinträchtigt die Markenwahrnehmung. Seit 2019 zeigt auch Google in mobilen Suchergebnissen das Favicon neben dem Website-Namen, was das kleine Symbol zusätzlich sichtbar macht.

Erklärung

Alle gängigen Favicon-Größen im Überblick:

Das klassische Favicon-Format .ico kann mehrere Größen in einer einzigen Datei zusammenfassen (typisch: 16 × 16, 32 × 32 und 48 × 48 px). Für maximale Kompatibilität wird heute eine Kombination aus .ico, mehreren .png-Größen und einem SVG-Favicon empfohlen.

Favicon-Formate im Vergleich:

• ICO: Das älteste und breiteste kompatible Format. Enthält mehrere Pixelgrößen in einer Datei. Alle Browser ohne Ausnahme unterstützen ICO. Nachteil: pixelbasiert, nicht skalierbar, kein Dark Mode.
• PNG: Modernes, verlustfreies Format mit Transparenz-Unterstützung. Funktioniert in allen aktuellen Browsern. Ideal für Apple Touch Icons (180 × 180 px) und PWA-Icons (192 × 192 und 512 × 512 px).
• SVG: Vektorbasiert, beliebig skalierbar, unterstützt Dark Mode über CSS media queries (ein Favicon kann sich automatisch an hellen oder dunklen Browser-Theme anpassen). Unterstützung: Chrome, Firefox, Edge (neuere Versionen). Safari unterstützt SVG-Favicons eingeschränkt. Für maximale Kompatibilität immer als Ergänzung zu ICO und PNG einbinden, nicht als Ersatz.

Technische Einbindung im HTML:

```html <!-- Standard-Favicon (ICO, alle Browser) --> <link rel="icon" href="/favicon.ico" sizes="any">

<!-- SVG-Favicon (moderne Browser, unterstützt Dark Mode) --> <link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon (iOS Homescreen) --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- PWA Manifest (Android, Chrome) --> <link rel="manifest" href="/site.webmanifest"> ```

Browser-Unterstützung:

• Chrome, Firefox, Edge: ICO, PNG, SVG (alle Größen)
• Safari Desktop: ICO, PNG, SVG (ab Safari 12)
• Safari iOS: nur über Apple Touch Icon (180 × 180 px PNG)
• Android/Chrome: über Web App Manifest (192 × 192 und 512 × 512 px PNG)

Gestaltungsprinzipien: Ein Favicon muss auf 16 × 16 Pixel erkennbar sein. Das ist eine extrem kleine Fläche: Komplexe Logos mit Text oder feinen Details scheitern auf dieser Größe. Bewährte Lösungen:

• Ein einzelner Buchstabe (erster Buchstabe der Marke, auf farbigem Hintergrund)
• Ein einfaches grafisches Symbol oder eine stark vereinfachte Version der Bildmarke
• Ein markantes Farb-Form-Kombination, die den Wiedererkennungswert des Logos transportiert

Farbe und Form müssen sowohl auf hellen als auch auf dunklen Browser-Themes funktionieren. SVG-Favicons können per CSS media query (prefers-color-scheme) zwischen zwei Varianten wechseln.

Beispiele

Google: Das farbige „G" auf weißem Hintergrund. Sofort erkennbar auf 16 × 16 px, ohne dass der Schriftzug sichtbar ist.

YouTube: Das rote Play-Button-Symbol, auch ohne den YouTube-Schriftzug sofort identifizierbar. Das Rot korrespondiert mit dem Corporate Design der gesamten Plattform.

GitHub: Das schwarze Octocat-Symbol (Oktopus-Katze). Das Maskottchen wurde für kleine Darstellungen optimiert und funktioniert auf hellen wie dunklen Hintergründen.

Wikipedia: Das Puzzleteil-Globus-Symbol funktioniert auf 16 × 16 Pixel erstaunlich gut: erkennbar durch die runde Form und das Puzzlemuster.

Süddeutsche Zeitung: Das Kürzel „SZ" auf blauem Hintergrund. Klares Beispiel dafür, wie ein Buchstaben-Icon Markenidentität auf minimalstem Raum transportiert.

In der Praxis

Favicons werden heute mit Tools wie RealFaviconGenerator.net erstellt. Das Tool nimmt eine Quelldatei (idealerweise SVG oder hochauflösendes PNG, mindestens 512 × 512 px) und generiert daraus automatisch alle benötigten Größen und Formate sowie den vollständigen HTML-Code.

Empfohlener Workflow:

1. Logo oder Icon als SVG vorbereiten (alternativ: PNG mindestens 512 × 512 px)
2. In RealFaviconGenerator.net hochladen
3. Preview für Browser-Tab, iOS, Android und PWA prüfen
4. Paket herunterladen (enthält ICO, PNG in allen Größen, SVG, manifest.json)
5. Dateien ins Root-Verzeichnis der Website legen
6. HTML-Code in den <head> der Website einbinden

Für PWAs (Progressive Web Apps) ist zusätzlich ein site.webmanifest erforderlich, das Icons in 192 × 192 und 512 × 512 px definiert. SVG-Favicons unterstützen Dark Mode: Ein Favicon kann sich automatisch an helle oder dunkle Systemeinstellungen anpassen.

Caching-Hinweis: Browser cachen Favicons aggressiv. Nach einem Update des Website Icons kann das alte Symbol noch Stunden oder Tage im Cache verbleiben. Workaround: Cache per Hard Reload leeren (Strg+Shift+R / Cmd+Shift+R) oder die Favicon-Datei mit einem neuen Dateinamen und aktualisiertem Link-Tag einbinden.

Vergleich & Abgrenzung

Favicon vs. App Icon: Das Favicon ist für Browser und Websites, App Icons sind für installierte mobile Anwendungen (iOS/Android). Beide dienen als kompakte Markenzeichen, unterscheiden sich aber in Größen, Formaten und technischen Anforderungen erheblich. App Icons auf iOS erscheinen in 60 × 60 pt (2x: 120 × 120 px), auf Android in bis zu 192 × 192 px.

Favicon vs. Logo: Ein Logo kann komplex sein und Text enthalten. Ein Favicon ist eine für winzige Darstellungen optimierte Ableitung des Logos, meistens die Bildmarke ohne Wortmarke.

ICO vs. SVG-Favicon: ICO ist das ältere, pixelbasierte Format mit der breitesten Browser-Unterstützung. SVG-Favicons sind skalierbar, kleiner in der Dateigröße und unterstützen Dark Mode. Die Empfehlung für neue Projekte: beide Formate parallel einbinden (ICO als Fallback, SVG als bevorzugtes Format für moderne Browser).

Favicon vs. OG-Image: Das Open Graph Image (og:image) ist das Vorschaubild, das beim Teilen eines Links in sozialen Netzwerken erscheint. Es hat nichts mit dem Favicon zu tun, ist aber ebenfalls ein wichtiges visuelles Markenelement einer Website.

Häufige Fragen (FAQ)

Welche Größe braucht ein Favicon? Für eine vollständige Favicon-Implementierung werden mehrere Größen benötigt. Das Minimum für alle Browser ist 16 × 16 px (Browser-Tab) und 32 × 32 px (Lesezeichen, Windows). Für iOS-Homescreen wird ein Apple Touch Icon in 180 × 180 px benötigt, für Android und PWAs ein Icon in 192 × 192 px und 512 × 512 px. Wer nur eine Datei pflegen möchte: SVG als Quelldatei ist skalierbar und deckt alle Größen ab, benötigt aber ICO als Fallback für ältere Browser.

Was ist der Unterschied zwischen Favicon und App Icon? Ein Favicon (Website Icon) erscheint im Browser: in der Tab-Leiste, in Lesezeichen und in Google-Suchergebnissen. Ein App Icon erscheint auf dem Homescreen eines mobilen Geräts für eine installierte native App. Technisch überschneiden sich beide bei PWAs: Wenn eine Website als Progressive Web App auf dem Homescreen gespeichert wird, übernimmt das über site.webmanifest definierte Icon die Rolle des App Icons. Es wird dann wie eine echte App dargestellt, obwohl es sich technisch um eine Website handelt.

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 Website Icon noch Stunden oder Tage im Cache gespeichert ist. Lösung: Browser-Cache leeren (Strg+Shift+R / Cmd+Shift+R), einen anderen Browser zum Testen nutzen oder die Favicon-Datei unter neuem Dateinamen ablegen und den HTML-Link entsprechend aktualisieren.

Muss ein Favicon immer quadratisch sein? Ja. Browser und Betriebssysteme erwarten quadratische Favicons (1:1 Seitenverhältnis). Nicht-quadratische Dateien werden abgeschnitten oder verzerrt. Das endgültig dargestellte Symbol kann durch das Betriebssystem eine andere Form erhalten (zum Beispiel runde Icons auf manchen Android-Versionen oder abgerundete Rechtecke auf iOS), aber die Quelldatei des Website Icons muss immer quadratisch sein.

Verwandte Einträge

• App Icon Design
• User Interface (UI)
• Responsive Design
• Gestaltgesetze

Weiterführend

• Coyier, C. (2021): Favicons, How to Create and Use Them. CSS-Tricks (css-tricks.com).
• Bidelman, E. (2023): SVG Favicons. web.dev (Google).
• RealFaviconGenerator (2024): Favicon Generator. realfavicongenerator.net.
• MDN Web Docs (2024): How to add a favicon. developer.mozilla.org.