Formats

ICO vs. PNG Favicon: Welches Format solltest du verwenden?

Verwende PNG als dein primäres Favicon und behalte eine favicon.ico im Website-Root als Fallback. PNG bietet dir volle 24-Bit-Farbe und einen echten Alphakanal, es komprimiert besser, und jeder aktuelle Browser akzeptiert es über ein Link-Tag; der verbliebene Vorteil von ICO ist, dass es mehrere Größen in einer Datei bündelt und das ist, was Clients von /favicon.ico anfragen, wenn kein Tag vorhanden ist. Beide auszuliefern kostet eine zusätzliche Datei und beseitigt den Kompromiss vollständig.

Alle Größen generieren

Die zwei Formate

ICO ist der Windows-Icon-Container, und es wurde eher zufällig zum Favicon-Format: Internet Explorer fragte /favicon.ico an, und alle lieferten eines aus. Sein prägendes Merkmal ist, dass eine einzelne .ico-Datei mehrere Bitmaps in verschiedenen Größen enthält und der Consumer eine davon auswählt.

PNG ist ein gewöhnliches Web-Bildformat mit verlustfreier Kompression und vollem Alphakanal. Es enthält genau ein Bild in einer Größe, sodass mehrere Größen mehrere Dateien und mehrere Link-Tags bedeuten – was moderne Browser ohnehin erwarten.

Wozu du greifen solltest

ICO

Fallback und Anfragen an den nackten Pfad

Eine Datei trägt 16-, 32- und 48-Pixel-Bitmaps zusammen
Wird von Browsern, Crawlern und Feed-Readern von /favicon.ico angefragt, ganz ohne Link-Tag
Von jedem je ausgelieferten Browser verstanden, auch sehr alten
Natives Format für Windows-Desktop-Verknüpfungen
Umständlich zu erstellen und zu prüfen; die meisten Tools behandeln es als Build-Artefakt

PNG

Start here

Dein primäres Favicon

24-Bit-Farbe, sodass Verläufe und fotografische Bildmarken erhalten bleiben
Voller Alphakanal, sodass Kanten sauber gegen jede Tab-Farbe anti-aliased werden
Kleiner als die entsprechende ICO bei gleicher Qualität
Von jedem aktuellen Browser über link rel="icon" unterstützt
Das Format, das Android- und PWA-Manifeste für Installations-Icons erwarten

Technischer Vergleich

Eigenschaft	ICO	PNG
Farbtiefe	8-Bit-Palette in klassischen Dateien; 32-Bit in modernen	24-Bit-Farbe plus 8-Bit-Alpha
Transparenz	1-Bit-Maske in klassischen Dateien; Alphakanal in 32-Bit-Einträgen	Voller Alphakanal
Größen pro Datei	Mehrere, typischerweise 16, 32 und 48	Eine
Kompression	Unkomprimierte Bitmaps oder PNG-komprimierte Einträge	Verlustfreies DEFLATE
Ohne Link-Tag angefragt	Ja, unter /favicon.ico	Nein

Was in den Head gehört

<!-- PNG first: modern browsers pick these -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- ICO fallback; also served from /favicon.ico for bare requests -->
<link rel="icon" href="/favicon.ico" sizes="any">

Beide zu deklarieren ist kein Konflikt. Ein Browser liest jeden Icon-Link, gleicht über Typ und Größe ab und verwendet die ICO nur, wenn er sie bevorzugt oder die PNGs fehlschlagen.

FAQ zu ICO vs. PNG

Kann ich favicon.ico ganz weglassen?

Das kannst du, und moderne Browser kommen damit klar, solange deine PNG-Link-Tags vorhanden sind. Was bricht, ist alles, was /favicon.ico per Pfad anfragt, ohne dein HTML zu parsen (Crawler, Feed-Reader, Link-Vorschau-Bots, manche Analytics), was einen 404 protokolliert und nichts anzeigt.

Welches Format gewinnt, wenn ich beide deklariere?

Der Browser entscheidet anhand der type- und sizes-Attribute an jedem Link. In der Praxis nehmen aktuelle Browser das PNG, das der benötigten Größe am besten entspricht, und greifen auf die ICO zurück, wenn nichts anderes passt.

Ist ICO qualitativ schlechter als PNG?

Nicht grundsätzlich. Ein 32-Bit-ICO-Eintrag trägt dieselbe Farbe und Alpha wie ein PNG, und viele ICO-Dateien betten buchstäblich PNG-Daten ein. Die Qualitätsklagen kommen von alten 8-Bit-Paletten-ICOs mit 1-Bit-Transparenz, die harte, ausgefranste Kanten erzeugen.