Welche Favicon-Größen braucht meine Website? (PNG, ICO, SVG erklärt)
von Tobias Berger / updated 02.10.2025 / 3 Min. Lesezeit
von Tobias Berger / updated 02.10.2025 /
3 Min. Lesezeit
Schnell-Referenz: Größen & Einsatzzwecke
| Use Case | Empfohlene Größe(n) | Format |
|---|---|---|
| Browser-Tab (Standard & HiDPI) | 16×16, 32×32 | PNG oder ICO |
| Apple-Touch (iOS/iPadOS) | 180×180 | PNG |
| Google/Android & SERPs | 48×48 (Vielfache: 96, 192) | PNG |
| Quelle/Source für Generatoren | 512×512 | PNG, optional SVG (mit Fallback) |
| Kompatibilität (Fallback) | /favicon.ico (Mehrgrößen) | ICO |
Praxis: minimaler Code für 99 % der Fälle
So nutzen: Die folgenden drei Bausteine decken Tabs (PNG), alte Browser (ICO) und iOS-Homescreen (Apple-Touch) ab.<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
Formate richtig wählen
Empfehlung: PNG für 16/32/48/180/192/512, zusätzlich ein/favicon.ico im Root. SVG nur mit PNG/ICO-Fallback einbinden. Achten Sie auf korrekte MIME-Types: image/png, image/x-icon, image/svg+xml.
Warum wird mein Favicon in Google nicht angezeigt?
Kurz: Meist Crawl-Verzögerung, falsches Markup oder blockierte Datei.
Prüfen:
rel="icon"im<head>, korrekter Pfad, HTTP-Status 200, keinrobots.txt-Block.Datei: Quadratisch, mind. 48×48 px (größer ok), eindeutiges, unbedenkliches Motiv.
Konsistenz: Auf allen wichtigen Seiten dasselbe Icon verlinken.
Cache: CDN/Server/Browser leeren; Google übernimmt Änderungen i. d. R. in Stunden bis wenigen Tagen.
Warum sehe ich mein (neues) Favicon im Browser/Chrome nicht?
Fast immer Cache oder Doppeleinträge.
Hard-Reload (Strg/Cmd+Shift+R), ggf. Inkognito testen; bei Bedarf URL-Versionierung wie
/favicon.png?v=2.DevTools → Network: Favicon-Request anwählen → Status 200, korrekter Content-Type (
image/pngoderimage/x-icon).Markup: Link gehört in den
<head>, nicht in den Body; alte/doppelterel="icon"löschen.Lokaltests: Viele Browser zeigen lokale Seiten ohne Favicon – online prüfen.
Welche Formate & Größen sollte ich verwenden, damit das Favicon überall klappt?
Setze auf PNG + ICO (SVG nur mit Fallback).
Minimal-Set: 16×16, 32×32 (Browser-Tabs), 180×180 (Apple Touch). Optional 512×512 (Android/Source).
Praxis: Zusätzlich ein
/favicon.icoim Domain-Root für maximale Kompatibilität und explizite<link rel="icon" ...>-Tags für PNG.Design: Einfach, hoher Kontrast, keine feinen Details – Test in 16×16, ob noch erkennbar.
Einheitlichkeit: Über alle Templates dasselbe Icon/Markup verwenden, damit keine Varianten kollidieren.
In diesem Artikel
Fazit: Meist lösen korrekte Pfade, sauberes rel="icon"-Markup und geleerte Caches das Problem, dass ein Favicon nicht angezeigt wird.
Tipp: Unsicher, wie du die Größen 16×16, 32×32, 48×48, 180×180 & Co. korrekt erzeugst? Nutze einen Favicon-Generator – der liefert dir alle benötigten Größen und Formate (PNG/ICO, optional SVG) fixfertig. Details & Tool-Empfehlungen im Favicon-Leitfaden 2025 (Generatoren).
Hey, ich bin Tobias!
Danke, dass du dir die Zeit genommen hast, diesen Beitrag zu lesen – richtig cool, dass dich das Thema Website & Webdesign interessiert!
Auf unserem Blog findest du noch viele weitere Tipps rund um Design, Technik und SEO. Und falls du Fragen hast oder Unterstützung bei deiner eigenen Website brauchst: Wir von BSC Webdesign stehen dir jederzeit gerne zur Seite.