Favicon-Größen und -Formate, die wirklich funktionieren

Warum das weiterhin verwirrend ist

Das Favicon hat eine der längsten und unübersichtlichsten Geschichten aller Webdateien. Es begann 1999 als einzelne 16×16-.ico-Datei, nach der Internet Explorer suchte unter /favicon.ico, ohne dass ein HTML-Tag nötig ist. Jede spätere Plattform – iOS-Home-Bildschirm-Symbole, adaptive Android-Symbole, angeheftete Windows-Kacheln, PWA-Manifeste – fügte ihre eigene Konvention hinzu, statt die alte zu ersetzen, denn eine Änderung des ursprünglichen Verhaltens hätte jede bestehende Website beeinträchtigt. Das Ergebnis ist eine Spezifikation, die nie aufgeräumt, sondern nur erweitert wurde. Die meisten Größenlisten im Web sind aus einer Zeit kopiert, in der mehr dieser Erweiterungen tatsächlich relevant waren.

Moderne Browser können außerdem deutlich besser mit den angebotenen Dateien umgehen. Chrome, Firefox und Safari können aus einem einzigen skalierbaren Symbol die kleine Darstellung für einen Tab erzeugen. Die lange Checkliste ist eine Absicherung für ältere Systeme, keine aktuelle Anforderung. Bei einer typischen Website kannst du den größten Teil bedenkenlos weglassen.

Das Set, das die tatsächliche Nutzung abdeckt

Drei Dateien decken praktisch die überwältigende Mehrheit der Browser und Geräte ab:

• favicon.ico mit einem 32×32-Bild – weiterhin die Ersatzlösung, nach der jeder Browser standardmäßig im Website-Stammverzeichnis sucht, selbst ohne <link> Tag vorhanden ist. Das .ico-Containerformat kann technisch mehrere Auflösungen enthalten. Ein einzelnes 32px-Bild darin genügt aber für die heutige Browsernutzung.
• Eine PNG-Datei mit 180×180 Pixeln als apple-touch-icon – das verwendet iOS, wenn ein Nutzer deine Website zum Startbildschirm hinzufügt. iOS liest dafür überhaupt keine favicon.ico. Ohne diese Datei erstellt es stattdessen eine Bildschirmaufnahme der Seite, die als Startbildschirmsymbol deutlich schlechter aussieht.
• Ein SVG-Favicon – skaliert sauber auf jede Tab-Größe und Pixeldichte und unterstützt die unten behandelte Media Query für den Dunkelmodus. Moderne Browser bevorzugen es, wenn sowohl ein SVG als auch eine .ico-Datei angegeben sind.

Im head-Bereich des Dokuments lautet das:

Alles über diese drei hinaus – das 512px-PWA-Symbol, adaptive Android-Symbolvarianten und Windows-Kachel-Meta-Tags – ist nur relevant, wenn du eine installierbare PWA erstellst oder ausdrücklich angeheftete Windows-Kacheln unterstützen willst. Ergänze sie, wenn diese Anforderung tatsächlich besteht, nicht vorsorglich.

Den Rasterteil dieses Sets von Hand zu erstellen bedeutet, dieselbe Grafik in mehreren Größen zu exportieren und in eine .ico-Datei zu packen. Unser Favicon-Generator erledigt das aus einem Quellbild: die favicon.ico, das 180px-apple-touch-icon und die PNGs mit 192 und 512, falls du ein Manifest möchtest. Das SVG muss weiterhin aus deinem Vektorwerkzeug kommen.

Was jede Plattform tatsächlich anfordert

• Desktop-Browser-Tabs rendern das Symbol mit ungefähr 16×16 CSS-Pixeln, für High-DPI-Displays hochskaliert. Deshalb ist hier ein SVG oder ein gut gestaltetes kleines PNG wichtiger als ein großes Quellbild. Der Tab ist die kleinste und am häufigsten betrachtete Darstellung deines Symbols.
• iOS-Startbildschirm fordert das apple-touch-icon mit 180×180 an. Das deckt die aktuellen iPhones mit der höchsten Pixeldichte ab; für ältere Geräte skaliert iOS herunter. iOS wendet außerdem automatisch abgerundete Ecken und in manchen Versionen einen leichten Glanz an. Runde die Ecken im Quellbild nicht vorher ab, sonst erhältst du eine doppelte Rundung.
• Android-Startbildschirm / PWA liest Größen aus site.webmanifest statt aus einem link-Tag, üblicherweise 192×192 und 512×512, und unterstützt eine „maskable“-Variante mit sicheren Randabständen, damit anpassbare Symbolformen wie Kreis, abgerundetes Quadrat oder Tropfen dein Design nicht beschneiden.
• Suchergebnisse (insbesondere Google) zeigen neben deinem Suchergebnis ein kleines Favicon an. Es wird auf dieselbe Weise wie das Symbol im Browser-Tab geladen und ähnlich klein dargestellt.

site.webmanifest: wofür es gedacht ist

A site.webmanifest Datei ist ein kleines JSON-Dokument, das deine Website als installierbare App beschreibt: Name, Designfarbe, Hintergrundfarbe und eine Liste von Symbolen mit angegebenen Größen. Damit wird aus „Zum Startbildschirm hinzufügen“ statt einer Lesezeichenverknüpfung etwas, das unter Android wie ein echtes App-Symbol aussieht und startet. Wenn du keine PWA erstellst und dir diese Installierbarkeit nicht wichtig ist, kannst du es ganz weglassen. Eine normale Website mit nur den drei Dateien oben funktioniert auch ohne. Fügst du es hinzu, verknüpfe es mit <link rel="manifest" href="/site.webmanifest"> und verweise innerhalb der JSON-Datei mit absoluten Pfaden auf deine Symbole.

Für Erkennbarkeit bei 16px gestalten

Ein Symbol im Browser-Tab ist winzig. Die meisten Favicon-Entwürfe scheitern nicht am Dateiformat, sondern daran, dass die Ausgangsgrafik nie in der tatsächlichen Anzeigegröße geprüft wurde. Details, die bei 512px klar erkennbar sind – eine Wortmarke, feine Linien, ein Verlauf mit mehreren sichtbaren Farbbändern –, werden bei 16px zu einem grauen Fleck.

• Reduziere das Motiv auf eine dominante Form oder Buchstabenform. Ein einzelnes kräftiges Schriftzeichen oder eine Symbolsilhouette bleibt beim Verkleinern erkennbar; ein detailliertes Logo mit mehreren Elementen nicht.
• Erhöhe den Kontrast und vereinfache die Farben. Zwei oder drei flache Farben sind in winzigen Größen besser erkennbar als ein Verlauf, der oft zu einem einzigen gemittelten Farbton verschwimmt.
• Verstärke dünne Striche. Eine Haarlinie, die in voller Größe gut aussieht, kann bei geglätteter Verkleinerung auf ein 16px-Raster vollständig verschwinden.
• Verkleinere den Export zum Test tatsächlich auf 16px und betrachte ihn. Beurteile nicht nur die Grafik in voller Größe und nimm an, dass sie erkennbar bleibt. Dieser Schritt wird beim Favicon-Design am häufigsten übersprungen.

Dunkelmodus

Browser-Tab-Leisten und Betriebssystemoberflächen können je nach System-Theme dunkel oder hell sein. Ein nur für helle Hintergründe gestaltetes Favicon kann auf einer dunklen Tab-Leiste verschwinden oder umgekehrt. Ein SVG-Favicon kann darauf direkt reagieren mit einer prefers-color-scheme Media Query innerhalb des eingebetteten Stilblocks des SVGs, die Füllfarben anhand des Nutzerdesigns wechselt. PNG- und ICO-Favicons können das nicht, weil sie statische Bilder sind. Ist Dunkelmodus-Unterstützung wichtig, ist das SVG-Favicon daher nicht optional, sondern das einzige dafür geeignete Format.

Ohne diese zusätzliche Lösung deckt ein Favicon-Design mit genügend Kontrast zu weißen und nahezu schwarzen Hintergründen die meisten Fälle recht gut ab. Meist gelingt das mit einer dünnen Kontur oder einem mittleren Farbton statt ausschließlich rein schwarzen oder rein weißen Füllungen – ohne zusätzliche Komplexität.

Warum das Favicon nicht aktualisiert wird und wie du das behebst

Favicons werden ungewöhnlich hartnäckig zwischengespeichert. Browser behandeln sie praktisch als statisch und zeigen ein veraltetes Symbol selbst nach einem Neuladen der Seite ohne Cache noch Tage oder Wochen lang. Die Favicon-Anfrage ist nicht wie ein Skript oder Stylesheet an die normale Ungültigmachung des Seitencaches gekoppelt. Drei Maßnahmen beheben das zuverlässig:

1. Ändere den Dateinamen oder ergänze einen Versions-Query-String – /favicon.ico?v=2 oder Umbenennen in /favicon-v2.ico erzwingt eine neue Anfrage, weil sich die URL selbst geändert hat.
2. Leere den speziellen Favicon-Cache des Browsers, der in Chrome vom allgemeinen Cache getrennt ist: über chrome://favicon-internals oder durch Löschen der Browserdaten mit ausgewählter Option „Bilder und Dateien im Cache“.
3. Gib dem Ganzen Zeit. Selbst bei geänderter URL lesen manche Browser und Suchmaschinen Favicons nach ihrem eigenen Zeitplan neu ein und speichern sie erneut. Insbesondere das Favicon eines Suchergebnisses kann der aktuellen Website um Tage hinterherhinken.

Häufig gestellte Fragen