Favicon wird nicht angezeigt: Ursachen & Lösungen 2025

von Tobias Berger / updated 01.10.2025 / 3 Min. Lesezeit

von Tobias Berger / updated 01.10.2025 /
3 Min. Lesezeit

Favicon eingebunden, aber nicht sichtbar? Diese Kurz-Anleitung zeigt die typischen Fehler (Pfad, MIME-Type, Cache) und wie Sie sie rasch beheben. Mehr Basics im Favicon-Leitfaden 2025 und den Formaten & Größen.

Checkliste: 10 einfache Fixes (Browser & Google)

Markup prüfen: Im <head> muss ein Icon stehen, z. B. <link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">. Lege zusätzlich /favicon.ico ins Hauptverzeichnis.
Pfade kontrollieren: Zeigt href exakt auf die Datei? Keine Tippfehler, keine alten Ordner. Server darf nicht 404 oder text/plain liefern.
Formate kombinieren: PNG + ICO sind am sichersten. SVG nur mit Fallback. Gute Basisgrößen: 16×16, 32×32, Apple Touch 180×180. Mehr dazu: Formate & Größen.
Ort korrigieren: Der Link gehört in den <head>, nicht in den Body. Theme/Builder kann den Head überschreiben – doppelte Einträge entfernen.
Dateiname klären: Verwende sprechende Namen (z. B. favicon-32.png) und optional ein Root-favicon.ico, das viele Browser standardmäßig finden.
Cache leeren: Hard-Reload im Browser; CDN/Server-Cache (z. B. LiteSpeed/Cloudflare) löschen. Bei Bedarf Version anhängen: /favicon.png?v=2.
Konsistenz sichern: Über alle Templates dasselbe Markup nutzen (Start, Blog, Produkte). Alte/veraltete Links entfernen, damit nur ein Icon greift.
Google abwarten: In den SERPs dauert die Aktualisierung oft Stunden bis Tage. Wichtig sind sauberes Markup, gültige Pfade und genug Zeit fürs Re-Crawling.
Lokale Tests vermeiden: Lokal gespeicherte Seiten zeigen oft kein Favicon. Online prüfen und den Request-Status in den DevTools (Network) checken – Status 200, Typ image/png oder image/x-icon.
Zusatzschritt: MIME-Type & CDN: Stelle sicher, dass .png als image/png und .ico als image/x-icon ausgeliefert wird (keine text/plain-Antworten). Prüfe, ob dein CDN alte Assets cached – ggf. Purge/Bypass durchführen.

Plattform-Fixes: kurz & konkret

Chrome

Cache löschen: Hard-Reload, Inkognito testen.
Neu starten: Chrome komplett schließen, erneut öffnen.
Requests prüfen: DevTools → Network → Icon anklicken – Status 200, korrekter Content-Type.

WordPress

Customizer nutzen: Design → Website-Informationen → Website-Icon (≥512×512) hochladen.
Caches leeren: Plugin-/CDN-Cache löschen; doppelte Head-Einträge im Theme/SEO-Plugin entfernen.
Fallback setzen: Optional /favicon.ico ins Root legen.

Shopify

Theme-Einstellung: Onlineshop → Themes → Anpassen → Favicon hochladen.
Konflikte prüfen: Falls Theme-Code eigenes Icon setzt, alten Eintrag entfernen.
Browser-Cache: Hard-Reload; bei Bedarf ?v=2 am Pfad anhängen.

Squarespace

Website-Icon: Einstellungen → Website-Icon (PNG/ICO) hochladen.
Anmeldung prüfen: Aus dem CMS ausloggen, um das echte Favicon zu sehen.
Dateiname/Cache: Bei hartnäckigem Cache Dateinamen ändern (z. B. favicon-32-v2.png).

Weiterlesen: Komplett-Guide mit Größen, Formaten & Generatoren im
Favicon-Leitfaden 2025.

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, kein robots.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/png oder image/x-icon).
Markup: Link gehört in den <head>, nicht in den Body; alte/doppelte rel="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.ico im 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.

Fazit: Meist lösen korrekte Pfade, sauberes rel="icon"-Markup und geleerte Caches das Problem, dass ein Favicon nicht angezeigt wird.

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.