Ein Favicon ist das kleine Symbol, das ein Browser im Tab, in Lesezeichen und im Verlauf anzeigt – und auf dem Startbildschirm eines Smartphones, wenn jemand deine Seite speichert. Es auf deine Website zu bekommen, kostet vier Dateien und rund fünf Minuten – und der größte Frust entsteht durch das Caching, um das es im letzten Abschnitt geht.

Der minimale Satz, der wirklich funktioniert

Du brauchst keine sechzehn PNGs und keine browserconfig.xml. Windows-Kacheln und die alten Internet-Explorer-Formate sind tot. Vier Dateien decken jeden Browser und jedes Gerät ab, das heute tatsächlich im Einsatz ist:

Datei	Größe	Wozu sie dient
`favicon.ico`	16 · 32 · 48 (mehrere Größen)	Ältere Browser sowie die Google-Suche, die `/favicon.ico` direkt abruft.
`icon.svg`	Vektor	Moderne Browser bevorzugen es – gestochen scharf in jeder Größe, und es passt sich dem Dark Mode an.
`apple-touch-icon.png`	180 × 180	iOS-Startbildschirm und Safari. iOS ignoriert hier SVG, daher ist das PNG erforderlich.
`android-chrome` 192 & 512	192 · 512	Android-Startbildschirm und installierbare PWAs, referenziert aus dem Web-App-Manifest.

Das HTML zum Einfügen in den <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">

Der Browser liest alle vier Zeilen und wählt das beste Format, das er unterstützt – ein aktuelles Chrome oder Safari nutzt also das SVG, während ein alter Browser auf die .ico zurückfällt. Das sizes="48x48" in der .ico-Zeile gibt einfach das größte darin enthaltene Bild an.

Das Web-App-Manifest

Das Manifest sorgt dafür, dass Android- und PWA-Installationen ein richtiges Icon verwenden. Ein minimales site.webmanifest:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

Mit "purpose": "any maskable" kann Android das Icon in seine adaptive Form zuschneiden, ohne dein Logo abzuschneiden – vorausgesetzt, du lässt ringsum einen sicheren Rand (siehe Profi-Tipps).

Wohin die Dateien gehören

Lege jede Datei in das Stammverzeichnis deiner Website. Browser – und der Googlebot – rufen /favicon.ico automatisch aus dem Stammverzeichnis ab, sogar ohne <link>-Tag; sie dort abzulegen ist daher die sicherste Voreinstellung.

Prüfen, ob es wirklich funktioniert hat

Lade die Seite per Hard-Refresh neu: Ctrl+Shift+R (Windows) oder Cmd+Shift+R (Mac).
Klemmt es weiterhin? Öffne die Seite in einem privaten/Inkognito-Fenster – es startet mit leerem Cache.
Lade jede Datei direkt, z. B. yourdomain.com/favicon.ico, und stelle sicher, dass sie das Bild liefert (HTTP 200) und keinen 404.
Prüfe den gerenderten <head> in den DevTools, nicht nur deine Quelldatei – ein Build-Schritt oder ein CMS kann die Pfade umschreiben.

Was am meisten Zeit frisst: das Caching

Browser cachen Favicons hartnäckiger als fast jede andere Datei und behalten das alte manchmal trotz gewöhnlicher Neuladevorgänge. Wenn ein neues Icon partout nicht erscheinen will:

Mach einen Hard-Refresh, schließe dann den Tab vollständig und öffne einen neuen – der Favicon-Cache hängt oft am einzelnen Tab.
Hänge beim Testen einen Versions-Parameter an, damit der Browser die Datei als neu behandelt: <link rel="icon" href="/favicon.ico?v=2">.
Die Google-Suche behält eine eigene Kopie und aktualisiert nach eigenem Zeitplan – rechne mit Tagen, manchmal Wochen, bis ein Suchergebnis das neue Icon zeigt.

Alles auf dieser Seite läuft in deinem Browser. Dein hochgeladenes Bild verlässt niemals dein Gerät – es gibt keinen Server, auf den es hochgeladen würde.

← Zurück zum Generator