Favicon-Formate erklärt: ICO, PNG, SVG und was Browser benötigen

Warum Favicons noch immer seltsam kompliziert sind

Ein Favicon sieht aus wie ein einzelnes kleines Bild, befindet sich aber an der Schnittstelle von Browser-Oberfläche, Lesezeichen, Tabs, angehefteten Verknüpfungen, Suchergebnissen, mobilen Homescreens und Installationen von Progressive Web Apps. Jeder Kontext hat leicht unterschiedliche Erwartungen.

Deshalb wirkt Favicon-Rat oft unübersichtlich. Manche Teams liefern nur eine einzelne favicon.ico aus, weil das früher ausreichte. Andere erzeugen ein Dutzend Dateien, ohne zu wissen, welche davon tatsächlich verwendet werden. Der sinnvolle Mittelweg ist kleiner: verstehen, was ICO, PNG und SVG jeweils gut können, und dann ein kompaktes Set ausliefern, das aktuelle Browser und gängige Gerätekontexte abdeckt.

Favicons sind nicht der Ort, um eine Bild-Pipeline vorzuführen. Sie sind der Ort, um nüchtern, explizit und kompatibel zu sein.

ICO: das alte Format, das nicht verschwinden will

ICO ist der klassische Windows-Icon-Container. Er kann mehrere Bitmap-Bilder in verschiedenen Größen enthalten, typischerweise 16×16, 32×32 und 48×48 Pixel. Das ist wichtig, weil ein Favicon in einem Browser-Tab sehr klein, in einer Lesezeichenliste größer und bei Windows-Verknüpfungen wieder anders gerendert werden kann.

Das wichtige Detail ist: ICO ist ein Container, nicht einfach ein einzelnes Bild. Eine gute favicon.ico enthält normalerweise mehrere Rastergrößen, damit der Browser oder das Betriebssystem die nächstpassende Variante wählen kann, statt eine einzige winzige Bitmap zu skalieren.

ICO ist aus drei Gründen weiterhin nützlich:

• Browser können /favicon.ico automatisch anfordern, selbst wenn Sie es nicht in Ihrem HTML verlinken.
• Einige ältere Browser und Integrationen erwarten es.
• Es ist ein sicherer Fallback, wenn neuere Icon-Deklarationen ignoriert werden.

Das bedeutet nicht, dass ICO Ihr einziges Icon sein sollte. Es ist umständlich zu bearbeiten, nicht besonders freundlich für moderne Workflows und als zentrale Quelle für ein Markenlogo ungeeignet. Behandeln Sie es als Kompatibilitäts-Fallback.

In der Praxis sollten Sie eine echte /favicon.ico im Stammverzeichnis der Website ablegen. Liefern Sie dort keinen 404 aus, außer Sie mögen laute Logs und unnötige erneute Browser-Anfragen.

PNG: das verlässliche Arbeitstier

PNG ist weiterhin das berechenbarste Rasterformat für Favicons und Touch-Icons. Es unterstützt Transparenz, wird breit unterstützt und verhält sich über Browser und Plattformen hinweg konsistent.

Für Favicons ist PNG nützlich, wenn Sie explizite pixelgenaue Icons wie 32×32 oder 48×48 wünschen. Für mobile Homescreen-Icons ist PNG in einigen Umgebungen praktisch verpflichtend. Apple-Touch-Icons etwa basieren im normalen Produktionseinsatz auf PNG.

Ein paar praktische Regeln helfen:

• Exportieren Sie aus einer Vektorquelle, nicht aus einer bereits kleinen Bitmap.
• Sorgen Sie dafür, dass das Icon bei 16×16 lesbar ist, bevor Sie sich um größere Größen kümmern.
• Fügen Sie genügend Abstand hinzu, damit die Marke in abgerundeten oder maskierten Kontexten nicht abgeschnitten wirkt.
• Vermeiden Sie feinen Text, dünne Linien und detaillierte Illustrationen.

PNG-Kompression ist bei Favicons meist kein Thema, über das man sich den Kopf zerbrechen muss, weil die Dateien winzig sind. Trotzdem sollten Sie kein 500-KB-Touch-Icon ausliefern, nur weil es direkt aus einem Design-Export stammt. Wenn Sie ohnehin größere Bildentscheidungen prüfen, gilt hier dieselbe disziplinierte Denkweise wie bei Bildformat-Entscheidungen im modernen Web: Wählen Sie das Format für die Aufgabe, nicht weil es gerade modern ist.

SVG: die moderne, flexible Option

SVG-Favicons sind attraktiv, weil sie auflösungsunabhängig sind. Eine einzelne kleine Datei kann in vielen Größen sauber gerendert werden und lässt sich direkt im Code bearbeiten oder aus Designsoftware exportieren.

Moderne Versionen von Chromium, Firefox und Safari unterstützen SVG-Favicons. Damit ist SVG für viele Websites ein gutes primäres Favicon-Format, besonders wenn das Icon ein einfaches Logo, eine Glyphe oder eine geometrische Marke ist.

SVG-Favicons haben jedoch Einschränkungen.

Erstens sollte das SVG in sich geschlossen sein. Verlassen Sie sich nicht auf externe Schriftarten, entfernte Bilder oder Skripte. Browser wenden auf SVGs, die als Bild verwendet werden, Einschränkungen an, und selbst wenn etwas in einem Browser funktioniert, kann es in einem anderen scheitern.

Zweitens: Halten Sie es visuell einfach. SVG löst das 16-Pixel-Problem nicht auf magische Weise. Eine detaillierte Vektorillustration ist immer noch unscharf, wenn sie in einen Tab gequetscht wird.

Drittens: Seien Sie vorsichtig mit dynamischem Styling. Manche Teams verwenden prefers-color-scheme innerhalb eines SVG-Favicons, damit sich das Icon an dunkle und helle Browser-Themes anpasst. Das kann funktionieren, aber Browserverhalten und Caching können uneinheitlich sein. Wenn Markenwiedererkennung wichtig ist, schlägt ein einzelnes robustes Icon oft eine clevere adaptive Variante.

SVG ist eine gute Quelle und ein gutes modernes Auslieferungsformat. Es ist kein Grund, Fallback-Dateien wegzulassen.

Wonach Browser tatsächlich suchen

Browser entdecken Favicons auf zwei Hauptwegen: über explizite HTML-Links und über implizite Anfragen an das Stammverzeichnis.

Das implizite Verhalten ist das alte: Wenn der Browser ein Icon möchte und keines gefunden hat, kann er /favicon.ico anfordern. Deshalb bleibt die ICO-Datei im Stammverzeichnis auch auf modernen Websites nützlich.

Das explizite Verhalten verwendet <link>-Elemente im Dokumentkopf. Ein kompaktes modernes Setup sieht so aus:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Das Manifest kann dann auf größere PNG-Icons verweisen, die für installierbare Web-Apps verwendet werden:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Dies ist nicht das einzige gültige Setup, aber eine gute Basis. Es gibt modernen Browsern ein SVG, stellt einen konventionellen ICO-Fallback bereit, deckt das Speichern auf dem iOS-Homescreen ab und unterstützt App-Installationskontexte.

Das Favicon-Set, das die meisten Websites ausliefern sollten

Für eine normale Marketing-Website, Dokumentationsseite, SaaS-App oder Publikation reicht dieses Set aus:

• /favicon.ico mit 16×16 und 32×32, optional 48×48.
• /icon.svg als modernes skalierbares Favicon.
• /apple-touch-icon.png mit 180×180.
• /icon-192.png und /icon-512.png, wenn Sie ein Web-App-Manifest haben.

Sie können weitere Größen hinzufügen, wenn eine Plattform eine spezifische Anforderung hat, aber erzeugen Sie nicht aus Gewohnheit zehn Dateien. Jede zusätzliche Datei ist ein weiterer Punkt, der gecacht, vergessen, falsch benannt oder nach einem Rebranding veraltet bleiben kann.

Wenn Ihre Website nicht installierbar ist und kein Manifest hat, benötigen Sie die 192- und 512-Pixel-Icons möglicherweise nicht. Wenn sich Ihre Website wie eine App verhält, wahrscheinlich schon.

Häufige Fehlerbilder

Die häufigsten Favicon-Fehler sind nicht künstlerischer Natur. Es sind Auslieferungsprobleme.

Eines davon ist aggressives Caching. Browser halten hartnäckig an Favicons fest. Beim Testen erscheint ein geändertes Icon möglicherweise erst, wenn Sie hart neu laden, Website-Daten löschen, einen neuen Dateinamen verwenden oder in einem frischen Profil testen. Bei Produktions-Rebrandings kann eine Änderung wie /icon.svg?v=2 im HTML helfen, aber die Stammdatei /favicon.ico ist schwieriger, weil Browser sie direkt anfordern. Die Datei zu ersetzen und Caches auslaufen zu lassen, gehört oft zur Arbeit dazu.

Ein weiteres häufiges Problem ist der falsche MIME-Typ. SVG sollte als image/svg+xml, PNG als image/png und ICO üblicherweise als image/x-icon oder image/vnd.microsoft.icon ausgeliefert werden. Viele Browser sind nachsichtig, aber nicht alle Kontexte sind es. Wenn etwas nur in einem Browser fehlschlägt, prüfen Sie die Netzwerkantwort, bevor Sie das Icon neu zeichnen. Hier gelten dieselben Gewohnheiten wie beim Debuggen von Redirects und HTTP-Headern in Produktion: Schauen Sie sich die tatsächliche Antwort an, nicht das, was das CMS angeblich ausliefert.

Ein drittes Thema ist die Designdichte. Logos, die in einem Website-Header hervorragend funktionieren, scheitern oft als Favicons. Das Tab-Icon ist ein harter Test. Entfernen Sie Wörter, vereinfachen Sie Formen, erhöhen Sie den Kontrast und testen Sie in echten Größen. Wenn das Icon innerhalb der Seite bedeutungstragender Inhalt ist, sind Barrierefreiheitsaspekte wie Alt-Text relevant; beim Favicon selbst handelt es sich um Dekoration der Browseroberfläche, nicht um Seiteninhalt. Zur Unterscheidung siehe unseren pragmatischen Leitfaden zu Alt-Text für Bilder.

<!-- tool-cta:start -->

💡 Probieren Sie dies aus: Generieren Sie die ICO-, PNG- und SVG-Varianten, die moderne Browser erwarten, in einem Durchgang mit dem Ultimate Favicon Generator.

<!-- tool-cta:end -->

Eine einfache Implementierungs-Checkliste

Verwenden Sie diese Checkliste vor der Auslieferung:

1. Beginnen Sie mit einer sauberen Vektor-Masterdatei.
2. Testen Sie die Marke bei 16×16 und 32×32.
3. Exportieren Sie ein in sich geschlossenes SVG-Favicon.
4. Erzeugen Sie einen mehrgrößigen ICO-Fallback.
5. Exportieren Sie ein 180×180-Apple-Touch-Icon.
6. Fügen Sie 192×192- und 512×512-PNGs hinzu, wenn Sie ein Manifest verwenden.
7. Legen Sie /favicon.ico im Stammverzeichnis der Website ab.
8. Prüfen Sie Statuscodes, MIME-Typen und Caching-Header.
9. Testen Sie mindestens in einem Chromium-Browser, in Firefox und in Safari, wenn Ihr Publikum Apple-Geräte umfasst.

Favicons sind klein, aber sie sind auch sehr sichtbar. Ein defektes Favicon lässt eine Website unfertig wirken. Ein gut gemachtes verschwindet in der Oberfläche, und genau das ist der Zweck.