Favicon (.ico) vs PNG

Das .ico-Format wurde speziell entwickelt, um mehrere Symbolgrößen in einem einzigen Binärcontainer zu speichern. Ein gut gebauter favicon.ico enthält Frames mit 16×16, 32×32, 48×48 und 64×64 Pixel. Wenn ein Browser ein Favicon für eine Registerkarte benötigt, öffnet er die .ico-Datei, liest das Verzeichnis ICO und wählt den Frame aus, der der erforderlichen Anzeigegröße am besten entspricht. Diese Multi-Size-Fähigkeit ist der entscheidende Vorteil von .ico gegenüber PNG.

PNG ist ein Einzelbildformat. Eine PNG-Datei enthält genau ein Bild mit genau einer Auflösung. Um mehrere Größen allein mit PNG abzudecken, benötigen Sie mehrere Dateien und mehrere `<link>`-Tags mit expliziten `sizes=`-Attributen. Dies ist ausführlicher, ermöglicht aber eine präzise Kontrolle darüber, welches Bild bei welcher Auflösung bereitgestellt wird. PNG unterstützt außerdem eine bessere verlustfreie Komprimierung als BMP-codierte ICO-Frames bei jeder gegebenen Auflösung.

Bei der Browserkompatibilität gewinnt .ico entscheidend. Jeder Browser – einschließlich älterer IE, alter Edge-, alter Safari-Versionen und obskurer Nischenbrowser – ruft /favicon.ico aus dem Domänenstamm ab, ohne dass ein `<link>`-Tag erforderlich ist. Selbst wenn Sie das Link-Tag ganz weglassen, versuchen Browser standardmäßig GET /favicon.ico. PNG erfordert explizite „<link rel='icon' type='image/png'>“-Tags mit korrekten MIME-Typen, andernfalls wird es ignoriert.

Die Transparenzunterstützung ist zwischen .ico und PNG gleich. Beide Formate unterstützen einen 8-Bit-Alphakanal (volle Transparenz pro Pixel). Allerdings behält .ico die Transparenz nur dann bei, wenn seine internen Frames PNG-Komprimierung und nicht BMP verwenden. Alte ICO-Encoder verwenden manchmal standardmäßig BMP, das eine begrenzte (1-Bit-)Transparenz aufweist. Verwenden Sie immer einen modernen Generator, der PNG-komprimierte .ico-Frames erzeugt.

Der Vergleich der Dateigröße hängt vom Kontext ab. Eine einzelne 32×32 PNG ist kleiner als eine .ico-Datei mit mehreren Größen, die 16, 32, 48 und 64 Pixel große Frames bündelt. Allerdings ersetzt die .ico-Datei vier separate PNG-Dateien plus vier Link-Tags. Für die Gesamtnutzlast ist eine gut komprimierte .ico-Datei mit mehreren Größen fast immer kleiner als der entsprechende Satz einzelner PNGs zusammen.

PNG überzeugt bei der Komprimierungseffizienz bei jeder einzelnen Größe. Der PNG-Komprimierungsalgorithmus (DEFLATE/zlib) ist besonders effektiv für flache Farblogos und Grafiken im Symbolstil mit scharfen Kanten und begrenzten Farbpaletten. Ein 32×32 PNG-Logo kann bei optimaler Komprimierung weniger als 200 Byte groß sein. Der entsprechende BMP-Frame in einer .ico-Datei ist unabhängig vom Bildinhalt immer 4 KB groß.

Für die Favicon-Berechtigung für die Google-Suche werden sowohl .ico als auch PNG unterstützt. Der Crawler von Google ruft zuerst das in Ihrem HTML verknüpfte Favicon ab oder greift auf /favicon.ico zurück. Die Mindestanforderung beträgt 48×48 Pixel und eine öffentlich zugängliche URL. Ein PNG mit der richtigen Größe, der mit „<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>“ verknüpft ist, erfüllt dies genauso gut wie eine .ico-Bündelung derselben Größe.

Das Verhalten im Dunkelmodus unterscheidet sich je nach Format. PNG-Dateien können sich nicht an das Farbschema des Benutzers anpassen – Sie benötigen JavaScript, um das Link-Tag href dynamisch auszutauschen, was fragil ist. Das .ico-Format verfügt überhaupt nicht über eine Dark-Mode-Funktion. Die Favicon-Anpassung im Dunkelmodus wird nur von SVG nativ über einen eingebetteten `@media (prefers-color-scheme: dark)`-Stilblock unterstützt. PNG und .ico sollten mit einem SVG-Overlay gepaart werden.

Das optimale moderne Setup vereint beide Formate. Verwenden Sie `<link rel='icon' href='/favicon.ico'>` als universellen Fallback, `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` für Retina-Klarheit und `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` für skalierbare Dunkelmodus-Unterstützung. Browser, die SVG-Favicons verstehen, wählen SVG; andere fallen bis PNG durch; Alte Browser erhalten die .ico.

Die Windows OS-Integration ist eine reine .ico-Domain. Desktop-Verknüpfungen, Datei-Explorer-Symbole und Windows-Taskleisten-Pins lesen alle das .ico-Format. Wenn einer Ihrer Benutzer Ihre Website an die Windows-Taskleiste anheftet oder eine Desktop-Verknüpfung zu Ihrer URL erstellt, wird nur /favicon.ico als Verknüpfungssymbol verwendet. PNG-Dateien werden in diesem Zusammenhang vollständig ignoriert.

Für 180×180 apple-touch-icon ist PNG das einzig gültige Format. iOS liest .ico nicht für Startbildschirmsymbole – es erfordert ausdrücklich ein PNG, das über „<link rel='apple-touch-icon'>“ verknüpft ist. Dies ist ein Fall, in dem PNG nicht nur bevorzugt, sondern erforderlich ist.

Die Serverkonfiguration sollte nicht übersehen werden. Viele Webserver stellen .ico mit einem falschen Inhaltstyp (`text/plain` statt `image/x-icon`) bereit, wenn dies nicht explizit konfiguriert ist. PNG-Dateien bieten eine umfassendere MIME-Typ-Unterstützung auf allen Hosting-Plattformen. Wenn Sie feststellen, dass Ihr favicon.ico nicht geladen wird, überprüfen Sie, ob Ihr Server `Content-Type: image/x-icon` oder `image/vnd.microsoft.icon` für ICO-Anfragen zurückgibt.

Der favicon generator gibt beide Formate gleichzeitig aus. Sie müssen sich nicht entscheiden – das Download-Paket enthält favicon.ico, eigenständige PNG-Dateien in 32×32 und 180×180 sowie SVG für den vollständigen modernen Stack. Die Verwendung dieses Pakets bedeutet, dass die Frage ICO vs. PNG automatisch beantwortet wird: Verwenden Sie beide, jeweils in dem Kontext, in dem sie sich auszeichnen.

Einen vollständigen Formatvergleich, der auch SVG abdeckt, finden Sie im best favicon format guide. Dieser Leitfaden erklärt, welches Format für jeden Anwendungsfall zu priorisieren ist – Standard-Website, PWA, E-Commerce-Shop und Entwicklertool – und bietet eine Entscheidungsmatrix für die Auswahl Ihres Favicon-Stacks.