SVG-, PNG- oder ICO-Favicon? Die Formate im Vergleich

Binde eine favicon.ico mit mehreren Größen ein, ein SVG-Favicon, wenn dein Zeichen echte Vektorgrafik ist, ein Apple Touch Icon mit 180 px und ein Web-Manifest. SVG-Favicons funktionieren in aktuellen Versionen von Chrome, Edge, Firefox und Opera, in Safari erst ab Version 26. PNG-Favicons mit festen Größen lässt du am besten aus den Tags heraus; das Beispielpaket unten zeigt jede Datei.

Wofür jedes Format da ist

Ein Favicon ist nicht eine einzige Datei. Browser, Betriebssysteme und Lesezeichen-Tools suchen jeweils nach einer anderen, und der HTML-Standard erlaubt einer Seite, mehrere anzugeben, und überlässt die Wahl dem Browser.

Datei	Format	Wofür
`favicon.ico`	ICO, mehrere Bitmaps in einer Datei	Die Rückfallebene: Ohne Icon-Link fragen Browser unter Umständen `/favicon.ico` im Stammverzeichnis der Website an. Dieses Paket legt Bilder mit 16, 32 und 48 px hinein.
`favicon.svg`	SVG	Eine skalierbare Datei für Browser, die SVG-Favicons unterstützen. Sie kann ihre eigenen Farben für hell und dunkel mitbringen.
`favicon-16x16.png`, `favicon-32x32.png`	PNG	Rasterkopien des Tab-Icons, für einen Website-Baukasten oder ein Tool, das ein PNG-Favicon verlangt.
`apple-touch-icon.png`	PNG, 180 × 180 px	Der Homescreen von iPhone und iPad, wenn jemand die Website dort hinzufügt.
`site.webmanifest`	JSON	Name, Farben und App-Icons für installierbare Web-Apps (siehe die Anleitung zu maskierbaren Icons).

ICO ist das älteste Format und wird immer noch am breitesten gelesen. Der HTML-Standard beschreibt die Anfrage nach /favicon.ico als etwas, das ein Browser tun kann, wenn eine Seite kein Icon angibt. Sieh sie also als Sicherheitsnetz und verlinke die Datei trotzdem ausdrücklich. MDN weist darauf hin, dass eine ICO-Datei mehrere Größen speichern kann – deshalb deckt eine Datei 16, 32 und 48 px ab.

SVG ist das einzige Format, das in jeder Größe und bei jeder Pixeldichte scharf bleibt. Ein <style>-Block im SVG kann mit prefers-color-scheme die Farben wechseln, damit ein dunkles Zeichen auch auf einer dunklen Tab-Leiste sichtbar bleibt. Der Server muss die Datei als image/svg+xml ausliefern: Laut Can I use verlangen Chromium-Browser und Firefox diesen Typ.

PNG-Favicons sind einfache Bitmaps, meist mit einem sizes-Attribut verlinkt. Der Standard nennt sizes einen Hinweis: Ein Browser kann damit die passendste Datei auswählen, muss es aber nicht. Das hat zwei Seiten, wie der nächste Abschnitt zeigt.

Welcher Browser was verwendet

Unterstützung für SVG-Favicons laut den Daten von Can I use, Stand 28. September 2026: Chrome und Edge ab Version 80, Firefox ab 41, Opera ab 67 und Safari ab 26.0, unter macOS wie unter iOS. Safari 18 und älter verwenden keine SVG-Favicons und greifen auf die PNG- und ICO-Dateien zurück. Das WebKit-Team hat die Änderung in Safari im Release-Beitrag zu Safari 26.0 im September 2025 angekündigt. Wer noch ein älteres Safari nutzt, sieht weiterhin die Raster-Icons – deshalb ersetzt ein SVG-Favicon sie nie.

Gibt eine Seite mehrere Icons an, wählt der Browser laut HTML-Standard das, das am besten zu ihm passt, und passen mehrere gleich gut, gewinnt das zuletzt angegebene. Erweist sich eine Datei als unbrauchbar, etwa weil er ihr Format nicht lesen kann, nimmt er die nächste. Was „am besten passt“, entscheidet der Browser: Einer, der nach angegebener Größe auswählt, kann ein PNG mit sizes="32x32" einem SVG ohne Größenangabe vorziehen, egal in welcher Reihenfolge. Das Snippet unten verlinkt deshalb gar keine PNGs mit fester Größe: Die ICO deckt die Rastergrößen ab, und das SVG steht danach.

Ein Detail stammt aus der Praxis und nicht von einem Browserhersteller. Der Favicon-Artikel von Evil Martians empfiehlt sizes="32x32" am ICO-Link, „um den Chrome-Bug zu beheben, bei dem er eine ICO-Datei einem SVG vorzieht“; laut Changelog wurde sizes="any" im Juli 2023 aus diesem Grund ersetzt. Der Artikel verlinkt keinen Chromium-Bugreport, und wir haben auch keinen gefunden – lies es also als Erfahrungswert. Der Generator folgt diesem Rat. Schaden kann es nicht, denn die ICO enthält tatsächlich ein Bild mit 32 px.

Apple Touch Icon. Apples archivierter Safari Web Content Guide dokumentiert <link rel="apple-touch-icon"> und nennt 180 × 180 px für iPhones mit Retina-Display. MDN ergänzt, dass iOS für Homescreen-Icons keine normalen rel="icon"-Links verwendet. Apples Dokumentation sagt nicht, was mit transparenten Pixeln passiert; eine Antwort in Apples Entwicklerforen (von einem anderen Entwickler, nicht von Apple) sagt, dass sie schwarz erscheinen. Der Generator macht diese Datei deshalb immer deckend, auf der Hintergrundfarbe, die du wählst.

Theme Color ist der unzuverlässigste Teil. Can I use führt für <meta name="theme-color"> keine Unterstützung in Firefox auf und sagt, dass Chrome auf dem Desktop die Farbe nur für installierte Web-Apps verwendet. Can I use und MDN sagen beide, dass sie ab Safari 26 nur noch für installierte Web-Apps gilt. Bei Chrome unter Android und Safari unter iOS 26 widersprechen sich die beiden Quellen im Detail. Nimm das Tag auf, aber plane dein Design nicht darum herum.

Apples älterer mask-icon-Link für angeheftete Tabs in Safari taucht in der archivierten Dokumentation noch auf. Wir haben keinen offiziellen Hinweis gefunden, dass er abgeschafft ist, aber auch nichts, das ihn verlangt. Dieses Paket enthält keinen.

Die kleine Auswahl, die sich lohnt

Für eine Website mit Vektorgrafik verlinkst du favicon.ico, favicon.svg und apple-touch-icon.png, dazu ein Manifest mit Icons in 192 und 512 px, wenn die Website installierbar sein soll. Bei dieser Auswahl landet auch der Artikel von Evil Martians. Die PNG-Favicons können ohne Link-Tag auf dem Server liegen, für Tools, die danach fragen. Gibt es dein Logo nur als Bitmap, lass das SVG weg: Ein in eine SVG-Datei verpacktes PNG bleibt eine Bitmap und bringt nichts. Zeichne es zuerst als echte Vektorpfade nach, wenn du ein SVG-Favicon willst.

Das HTML-Snippet

Diese Tags schreibt der Generator für das Beispielpaket unten in favicon.html, mit den Dateien im Stammverzeichnis der Website:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">

Liegen deine Dateien in einem Ordner wie /assets/icons/, gib diesen Ordner im Favicon-Generator als Pfad-Präfix an, dann ändert sich jedes href mit. Kopier außerdem favicon.ico ins Stammverzeichnis, wo Browser auf Seiten ohne Icon-Link danach suchen. Eine Vorlage als PNG, JPG oder WebP ergibt dieselben Tags ohne die SVG-Zeile.

Ein echtes Beispiel zum Herunterladen

Wir haben das Zeichen dieser Website (ein SVG aus unserem eigenen Code, kein Upload von jemandem) durch den Favicon-Generator geschickt: mit dem Namen „png2svg.art“, Designfarbe #0a2d8f, Hintergrund #e8efff und 8 % Innenabstand. Danach wurde nichts bearbeitet: Das sind genau die Dateien, die das Tool erstellt.

Das Favicon mit 32 px in seiner echten Größe:

Das Apple Touch Icon mit 180 px, deckend auf der Hintergrundfarbe:

Das ganze Beispielpaket herunterladen (ZIP): favicon.svg, favicon.ico, beide PNG-Favicons, das Apple Touch Icon, vier App-Icons, site.webmanifest, favicon.html und eine README.

Deine Favicons prüfen

Öffne die Seite nach dem Hochladen in einem privaten Fenster: Browser speichern Favicons lange im Cache, und ein altes Icon in einem normalen Fenster beweist nichts. Prüf im Netzwerk-Tab der Entwicklertools, dass favicon.svg als image/svg+xml ausgeliefert wird und jede Datei mit 200 antwortet. Sieh dir den Tab im hellen und im dunklen Modus an, und füge die Seite auf einem Smartphone zum Homescreen hinzu, um das Touch Icon zu prüfen.