Favicon-Formate im Vergleich: ICO vs. PNG vs. SVG
Drei Formate, drei Aufgaben. Nutze .ico für den Pfad /favicon.ico und alte Clients, PNG für moderne Browser und jede App-Icon-Größe, und SVG für ein gestochen scharfes, theme-fähiges Tab-Icon.
Die Formate erledigen unterschiedliche Aufgaben
Es gibt kein einzelnes bestes Favicon-Format. Jedes deckt einen Fall ab, den die anderen nicht können. Sich für eines zu entscheiden und es überall zu erzwingen, ist der schnellste Weg zu leeren Tabs und Startbildschirmen mit grauem Kasten.
Das .ico-Format ist ein Container, der mehrere Größen in einer Datei bündelt. Das ist wichtig, weil Browser und Crawler standardmäßig weiterhin /favicon.ico anfragen und ältere Clients nur .ico verstehen. Ein echtes .ico ist kein PNG mit umbenannter Endung. Eine Datei umzubenennen ändert ihren Namen, nicht ihre Bytes, und die meisten Clients weisen sie zurück.
PNG ist das Arbeitspferd. Jeder moderne Browser liest es, und jeder App-Icon- und Manifest-Slot (16, 32, 180, 192, 512) ist ein PNG. SVG ist der Neuzugang: eine einzige Vektordatei, die in jeder Größe scharf bleibt und über eine Media Query in der Datei selbst die Farben für den Dark Mode wechseln kann.
ICO vs. PNG vs. SVG
| Format | Am besten für | Vorsicht bei |
|---|---|---|
| .ico | Der Pfad /favicon.ico und alte Browser oder Crawler, die nur .ico lesen | Muss ein echter Container mit mehreren Größen sein (16 + 32 + 48), kein umbenanntes PNG. Nicht für App-Icons verwenden. |
| PNG | Tabs moderner Browser und jede App-Icon- und Manifest-Größe (16, 32, 180, 192, 512) | Raster, daher ist jede Größe eine eigene Datei. Du brauchst trotzdem alle Größen, ein einzelnes PNG deckt nicht alle ab. |
| SVG | Ein einzelnes gestochen scharfes Tab-Icon, das auf jede Größe skaliert und im Dark Mode die Farbe umschalten kann | Nicht gültig unter /favicon.ico und nicht für iOS- oder Android-Startbildschirme genutzt. Halte es simpel, Effekte können in Browsern unterschiedlich rendern. |
Wie sie im head zusammenspielen
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Ein Browser, der SVG liest, nutzt favicon.svg. Alles andere fällt auf die PNGs und das .ico zurück. Das apple-touch-icon bleibt PNG, weil iOS SVG hier ignoriert.
Häufige Fragen
Kann ich einfach ein PNG in favicon.ico umbenennen?
Nein. .ico ist ein eigenes Container-Format, kein PNG mit anderer Endung. Manche Browser tolerieren eine falsch benannte Datei, viele aber nicht, und Crawler sind strenger. Erzeuge ein echtes .ico mit mehreren Größen.
Brauche ich noch favicon.ico, wenn ich PNG und SVG habe?
Ja, behalte eins. Browser, Feed-Reader und Such-Crawler fragen /favicon.ico weiterhin ganz ohne Tag an. Eine Datei unter diesem Pfad ist das Sicherheitsnetz, wenn deine Link-Tags übersehen werden.
Ist ein SVG-Favicon besser als PNG?
Fürs Tab-Icon kann es das sein, weil eine einzige Datei in jeder Größe scharf bleibt und sich an den Dark Mode anpassen kann. Es ersetzt nicht die PNG-App-Icons für Startbildschirme, also nutze beide.
Welches Format nehme ich für das 512x512-Manifest-Icon?
PNG. Das icons-Array des Manifests erwartet Raster-PNGs in 192 und 512, inklusive eines maskable. SVG ist nicht das Format, das Android für installierte App-Icons verwendet.