Warum wird mein Favicon nicht angezeigt?

Wenn das Favicon fehlt oder falsch dargestellt wird: häufige Ursachen und Lösungen in verschiedenen Browsern und auf verschiedenen Plattformen.

Häufige Gründe, warum das Favicon fehlt

Wenn das Favicon nicht erscheint, gibt es ein paar typische Ursachen. Wer sie kennt, findet den Fehler schneller. Am häufigsten:

Falscher Dateipfad: Oft stimmt der Pfad im HTML-link-Tag nicht
Browser-Cache: Browser cachen Favicons hartnäckig. Nach einer Korrektur kann das alte Symbol noch eine Weile bleiben
Fehlende HTML-link-Tags: Ohne passende link-Tags im head erscheint kein Favicon
Falsches Format oder falsche Größe: Nicht unterstützte Formate oder unpassende Maße können die Anzeige verhindern
Server-Konfiguration: Falsche MIME-Typen oder Server-Einstellungen können Anfragen blockieren
HTTPS/HTTP-Mismatch: Mixed Content kann das Laden des Favicons verhindern

So beheben Sie fehlende Favicons

1. HTML-link-Tags prüfen

Zuerst die link-Tags im head prüfen. Fehlen sie oder sind sie falsch, erscheint das Favicon nicht.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Die href-Pfade müssen zu den echten Dateien passen. Stimmen sie relativ zum Stammverzeichnis?

2. Browser-Cache leeren

Browser cachen Favicons aggressiv — deshalb kann das Symbol nach einer Code-Korrektur noch fehlen. Gegen den Cache:

Hart neu laden (Ctrl+Shift+R unter Windows/Linux, Cmd+Shift+R unter Mac)
Cache und Cookies für Ihre Site leeren
Die Seite in einem Inkognito- bzw. privaten Fenster öffnen
24–48 Stunden warten, bis der Cache von selbst abläuft

Erscheint das Favicon danach immer noch nicht, liegt es wahrscheinlich nicht am Cache.

3. Pfade und Ablage prüfen

Die Dateien müssen am erwarteten Ort liegen. Fehlen sie oder liegen sie im falschen Ordner, bleibt das Symbol aus.

Übliche Orte für Favicon-Dateien:

Stammverzeichnis: /favicon.ico or /favicon.png
public-Ordner: /public/favicon.ico (bei Static-Site-Generatoren)
assets-Ordner: /assets/favicon.ico

Die Pfade im HTML müssen mit den echten Speicherorten auf dem Server übereinstimmen.

4. Format und Größe prüfen

Ein ungeeignetes Format oder die falsche Größe kann die Anzeige verhindern. Dagegen:

ICO-Format: Klassisches Format, in allen Browsern (16×16 oder 32×32 Pixel)
PNG-Format: Moderne Browser unterstützen PNG-Favicons (16×16, 32×32, 48×48, 96×96, 192×192, 512×512)
SVG-Format: Von modernen Browsern unterstützt, skalierbar und auflösungsunabhängig

Dateien müssen korrekt formatiert und bemessen sein. Im Zweifel zuerst ein übliches ICO oder PNG testen.

5. Server-Konfiguration prüfen

Eine falsche Server-Einstellung kann das Favicon blockieren. Prüfen Sie:

MIME-Typen für .ico, .png und .svg sind korrekt gesetzt
Der Server erlaubt Anfragen auf die Favicon-Dateien
Keine Redirect-Regeln blockieren die Anfragen
HTTPS und HTTP sind konsistent (kein Mixed Content)

Liegt es am Server, den Hoster fragen oder die Konfigurationsdateien prüfen.

6. In mehreren Browsern testen

Manchmal fehlt das Favicon nur in einem Browser. Zur Kontrolle:

In Chrome, Firefox, Safari und Edge testen
Mobile Browser prüfen (iOS Safari, Chrome Mobile)
Prüfen, ob es in Lesezeichen und Verlauf erscheint
Desktop und Mobil testen

Fehlt es nur in bestimmten Browsern, deren Anforderungen oder bekannte Einschränkungen prüfen.

Kurze Checkliste

Damit finden Sie schnell, warum das Favicon fehlt:

HTML-link-Tags stehen im head
Pfade im HTML stimmen mit den Dateien überein
Die Dateien existieren und sind erreichbar
Das Format wird unterstützt (ICO, PNG oder SVG)
Cache geleert oder im Inkognito-Modus getestet
Keine Konsolenfehler beim Laden des Favicons
MIME-Typen auf dem Server sind korrekt

Mit einem Generator Fehler vermeiden

Wenn das Favicon fehlt und Formate oder Größen unsicher sind, hilft ein Generator. Tools wie logo87.com erzeugen die üblichen Größen und Formate, damit das Symbol in Browsern und auf Geräten erscheint.

Ein guter Generator liefert:

Die üblichen Größen (16×16, 32×32, 48×48, 96×96, 192×192, 512×512)
Mehrere Formate (ICO, PNG, SVG)
Apple Touch Icon für iOS
Fertige HTML-link-Tags zum Kopieren

Damit entfallen typische Ursachen wie falsches Format, falsche Größe oder fehlende Dateien.

Fazit

Fehlt das Favicon, liegt es meist am Pfad, am Cache, an fehlenden HTML-Tags oder am Dateiformat. Mit den Schritten oben finden Sie die Ursache in der Regel schnell.

Browser cachen Favicons hartnäckig. Nach einer Korrektur Cache leeren oder im Inkognito-Fenster prüfen. Bleibt es weg, Server-Konfiguration oder Hoster prüfen.

Ein Generator mit den richtigen Dateien und Formaten senkt das Risiko deutlich — oft der einfachste Weg, das Favicon in allen Browsern und auf allen Geräten zum Laufen zu bringen.