Favicon wird nicht angezeigt? So behebst du es

8 min read

13. Juni 2026

Dein Favicon wird nicht angezeigt, wenn der Browser keine gültige Icon-Datei unter der in HTML deklarierten URL findet, wenn Tags im serverseitig gerenderten <head> fehlen, oder wenn ein gecachtes Platzhalter-Icon die echte Datei verdrängt. Meist sind es falsche Pfade, fehlende link rel="icon"-Tags oder Icons, die erst per JavaScript zu spät injiziert werden.

Dieser Ratgeber geht alle häufigen Ursachen der Reihe nach durch. Nach jedem Fix die Live-URL mit dem Favicon Check scannen, bevor du den Tab schließt.

Schnelle Diagnose

Symptom	Wahrscheinliche Ursache
Generisches Globus-Symbol oder leerer Tab	Keine Datei unter deklarierter URL oder `/favicon.ico`
Icon nur auf der Startseite	Relative Pfade brechen auf verschachtelten Routen
Icon in einem Browser, nicht im anderen	Verwechslung von `apple-touch-icon` und `rel="icon"`
Icon in DevTools, nicht im Tab	Clientseitig injizierte Tags, nicht in view-source
Icon nur nach Hard-Refresh	Browser-Cache oder veraltete CDN-Datei

Starte mit view-source auf der betroffenen Seite, nicht im Elements-Panel. Crawler und First Paint nutzen das rohe HTML.

Schritt 1: Tags im Server-HTML prüfen

Seitenquelltext anzeigen auf der exakten URL, wo das Favicon fehlt. Suche nach rel="icon" und favicon.ico.

Erwartet wird etwa:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Fehlt alles, fragt der Browser automatisch /favicon.ico im Domain-Root an. Fehlt auch die Datei, kommt ein Generik-Icon.

Favicons nur per JavaScript scheitern

SPAs, die <link rel="icon"> erst nach React- oder Vue-Mount setzen, wirken in DevTools Elements korrekt. Das Tab-Icon wurde aber vor dem Script geladen. Favicon-Tags gehören ins serverseitig gerenderte index.html oder Layout-Template.

Bei Next.js: app/layout.tsx Metadata oder statische Dateien in app/. Copy-Paste-HTML findest du in Favicon einbinden (HTML).

Schritt 2: Kaputte Dateipfade fixen

Die häufigste Ursache: ein href, das nicht auf jeder Route auflöst.

Falsch: relative Pfade auf verschachtelten Seiten

<link rel="icon" href="favicon.ico">

Unter https://example.com/blog/mein-artikel fordert der Browser https://example.com/blog/favicon.ico an. Datei nicht gefunden.

Richtig: root-relative Pfade

<link rel="icon" href="/favicon.ico">

Root-relative Pfade starten immer an der Domain-Wurzel.

CDN und absolute URLs

Liegen Icons auf einem CDN, volle HTTPS-URL nutzen:

<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.example.com/favicon-32x32.png">

Teste eine tiefe URL, nicht nur die Startseite. https://deineseite.de/pfad/zur/seite in den Favicon Check einfügen. Erscheinen Icons auf der Homepage, aber nicht auf Unterseiten, sind die Pfade fast sicher relativ.

Schritt 3: favicon.ico im Root prüfen

Browser rufen automatisch ab:

https://deinedomain.de/favicon.ico

URL direkt in einem neuen Tab öffnen. Du solltest das Bild sehen oder einen Download erhalten. Bei 404 zeigen viele Browser kein Custom-Icon, auch wenn PNG-link-Tags existieren.

favicon.ico ins Web-Root legen oder den Host entsprechend konfigurieren. Der Favicon Check prüft /favicon.ico, wenn es nicht im HTML steht.

Schritt 4: HTTPS und Mixed Content

Seiten über HTTPS können keine Favicons über HTTP laden. Mixed Content wird blockiert.

Falsch:

<link rel="icon" href="http://example.com/favicon.ico">

Alle Icon-URLs müssen in Produktion https:// nutzen.

Schritt 5: Öffentliche Erreichbarkeit

Icons hinter Login funktionieren nicht für anonyme Besucher und Audit-Tools.

Icon-URL im Inkognito-Fenster öffnen. Typische Blocker:

Login-Wände auf Staging
Firewall-Regeln
Hotlink-Schutz auf CDNs
Falscher MIME-Type in strengen Clients

Listet der Favicon Check dein Icon mit Vorschau-Thumbnail, ist die Datei erreichbar.

Schritt 6: Browser-Cache ausschließen

Browser cachen Favicons hart. Du hast die Datei gefixt, siehst aber noch Globus oder altes Logo.

Versuche:

Hard-Refresh: Cmd+Shift+R (Mac) oder Ctrl+Shift+R (Windows)
Privates oder Inkognito-Fenster
Anderen Browser, den du für die Site noch nicht genutzt hast
Datei umbenennen (favicon-v2.ico) und href anpassen

Cache ist ein häufiger Grund, warum das Favicon nach Deploy „nicht angezeigt“ wird, obwohl es für neue Besucher funktioniert. Für einen schnellen Retest reicht Inkognito.

Schritt 7: MIME-Types und Server-Config

Server sollten sinnvolle Content-Type-Header liefern:

Datei	Erwarteter Type
`.ico`	`image/x-icon` oder `image/vnd.microsoft.icon`
`.png`	`image/png`
`.svg`	`image/svg+xml`

Falsche Types blockieren selten alle Browser, können aber Validatoren brechen. Response-Header im Network-Tab prüfen.

Plattform-Hinweise

Chrome und Firefox (Desktop)

rel="icon" mit PNG oder ICO. Optional SVG mit PNG-Fallback. 16×16 und 32×32 decken die meisten Tabs ab. Vollständiges Set: Favicon-Größen-Leitfaden.

Safari (macOS)

Gleiche rel="icon"-Tags. Angeheftete Tabs brauchen separat rel="mask-icon". Fehlendes mask-icon entfernt nicht das Tab-Favicon.

Safari (iOS)

Homescreen-Icons nutzen apple-touch-icon, nicht rel="icon". Tab-Icon kann funktionieren, iOS zeigt trotzdem ein Generik-Kachelbild ohne apple-touch-icon.

Android / PWA

Launcher-Icons kommen aus manifest.json. Fehlende Manifest-Icons brechen nicht immer den Tab, aber Install-Prompts. Manifest verlinken:

<link rel="manifest" href="/site.webmanifest">

Häufige Fehler

Upload nach `/assets/` ohne Tag-Update

Datei existiert, HTML zeigt noch auf altes /favicon.ico.

Deploy auf Subpath ohne Base-URL

Sites unter example.com/app/ brauchen oft absolute Pfade oder <base href>. Exakte Produktions-URL-Struktur testen.

apple-touch-icon vergessen

Tab-Icon ok, Nutzer sagt „Favicon fehlt auf iPhone“. Ergänzen:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Widersprüchliche doppelte Tags

Mehrere rel="icon"-Tags auf verschiedene Dateien verwirren Audits. Der Scanner listet jeden Tag, Konflikte fallen sofort auf.

CMS überschreibt dein Icon

WordPress Customizer, Shopify Theme Settings oder HubSpot können ein kleines generiertes Icon setzen, während dein Entwickler-Template andere Pfade referenziert. View-source zeigt, welches Set wirklich ausgeliefert wird. Favicon Check hilft beim Abgleich ohne manuelles Durchklicken jedes href.

Staging vs. Produktion

Du hast Staging gefixt, Produktion liefert altes HTML. Immer die öffentliche Produktions-URL prüfen.

Wenn nur ein Browser betroffen ist

Trifft das Problem nur Safari, fehlt oft apple-touch-icon oder mask-icon, nicht zwingend das Tab-Icon. Trifft es nur Chrome auf Android, prüfe Manifest-Icons. Ist nur Firefox betroffen, teste favicon.ico MIME-Type und ob SVG ohne PNG-Fallback deklariert ist.

Ein Scan mit Favicon Check zeigt das komplette Set. Danach gezielt im betroffenen Browser in Inkognito nachstellen, statt blind alle Dateien zu ersetzen.

Fix-Workflow

View-source auf betroffener Seite. Alle link rel="icon", apple-touch-icon, manifest notieren.
Jedes href in neuem Tab öffnen. 404s und HTTP-URLs fixen.
/favicon.ico im Domain-Root bestätigen.
Tags ins serverseitige HTML verschieben, wenn sie nur nach JS erscheinen.
Deploy über HTTPS.
Mit Favicon Check scannen.
Hard-Refresh oder Inkognito im Browser.
Optional: Open-Graph-Scanner auf derselben URL.

Checkliste: Favicon fehlt komplett

View-source: rel="icon" und apple-touch-icon vorhanden
Jedes href in neuem Tab ohne 404
/favicon.ico im Root erreichbar
Nur HTTPS-URLs in Produktion
Tags im serverseitigen HTML, nicht nur per JS
Tiefe URL mit Favicon Check gescannt
Inkognito-Test im Browser nach Deploy

Wenn alle Punkte grün sind und das Icon trotzdem fehlt, prüfe Browser-Extensions oder Enterprise-Policies, die Favicons blockieren. Selten, aber in Firmenumgebungen vorkommend.

Wenn das Favicon nur in der Suche fehlt

Google kann in SERPs ein Favicon anzeigen, unabhängig vom Browser-Tab. Tab-Icon funktioniert, Google zeigt Generik: Recrawl abwarten oder Search Console prüfen. SERP-Favicon und Tab-Icon können zeitversetzt aktualisieren.

Für den technischen Check reicht weiterhin Favicon Check auf der Live-URL. Du siehst, welche Dateien deklariert sind, bevor du auf Indexierung wartest.

FAQ

Warum wird mein Favicon in Chrome nicht angezeigt?

Meist 404 auf dem Pfad, relatives href auf verschachtelter Route, oder Tags nur per JavaScript. View-source prüfen und Icon-URL direkt öffnen.

Braucht jede Seite eigene Favicon-Tags?

Nein. Ein Set im Shared Layout reicht. Fehlende Tags in einem Template brechen ganze Bereiche.

Reicht nur favicon.ico ohne link-Tags?

Viele Browser finden /favicon.ico automatisch. Explizite Tags für PNG und apple-touch-icon sind trotzdem empfohlen.

Lokal ok, in Produktion fehlt es?

Andere Base-Pfade, fehlende Dateien im Deploy, HTTP vs. HTTPS. View-source auf beiden Umgebungen vergleichen.

Wie testen ohne Raten?

Favicon Check nutzen. Er parst HTML, prüft /favicon.ico, liest Manifest-Icons und zeigt Vorschauen.

Nach Framework-Migration weg?

Neuer Build kann Icons woanders ablegen oder public/-Dateien weglassen. Produktion scannen und Pfade mit Static Assets abgleichen.

Schadet fehlendes Favicon dem SEO?

Nicht direkt fürs Ranking, aber weniger Wiedererkennung in Tabs, Lesezeichen und SERP-Favicons. Für Vertrauen und Polish trotzdem fixen.

Nicht angezeigt vs. nicht aktualisiert?

Nicht angezeigt: Browser findet keine gültige Datei. Nicht aktualisiert: altes gecachtes Icon bleibt. Unterschiedliche Fixes. Bei Verdacht auf Cache zuerst Inkognito testen.

Blockiert ein Adblocker oder Privacy-Tool das Icon?

UBlock Origin und strenge Tracking-Blocker greifen selten Favicons an, aber manche Enterprise-Filter blockieren unbekannte CDN-Pfade. Teste ohne Extensions. Wenn das Icon dann erscheint, CDN-Domain oder Pfad anpassen.

Favicon nach Relaunch auf neuem Stack

Headless CMS, Static Site Generator oder Migration von WordPress zu Next.js ändern oft Asset-Pfade. Alte /wp-content/uploads/favicon.png-URLs 404en auf dem neuen System. Mapping-Tabelle für Redirects oder neue Pfade im Layout setzen, dann Favicon Check auf Staging und Produktion laufen lassen.

Fazit

Ein fehlendes Favicon heißt: Dateien müssen auffindbar sein und Tags serverseitig korrekt stehen. Pfade fixen, /favicon.ico bestätigen, über HTTPS ausliefern und die Live-URL mit dem Favicon Check validieren. Die meisten Fälle sind nach einem Deploy-Zyklus gelöst.