Favicon wird nicht angezeigt oder aktualisiert? 9 Ursachen & Lösungen
Die neun Ursachen, die Favicons kaputt machen, und die exakte Lösung für jede. In neun von zehn Fällen ist es Caching, also fang dort an und arbeite dich die Tabelle hinunter.
<link rel="icon" href="/favicon.ico?v=2" sizes="any">Erst das Ändern der URL bringt den Browser dazu, eine neue Datei zu laden. Das ICO an Ort und Stelle zu bearbeiten reicht nicht.
Ursachen & Lösungen
| Ursache | Warum es kaputtgeht | Lösung |
|---|---|---|
| 1. Browser- oder CDN-Caching | Browser cachen Favicons härter als fast jedes andere Asset, und ein vorgeschaltetes CDN fügt eine zweite Schicht hinzu. | Mach einen Hard-Refresh (Cmd+Shift+R / Ctrl+F5) und häng einen Versions-Query-String an, damit sich die URL selbst ändert. |
| 2. Falscher Dateipfad | Ein relativer Pfad wird gegen die aktuelle Seite aufgelöst, nicht gegen die Wurzel. | Verwende einen führenden Schrägstrich, /favicon.ico, und bestätige, dass die Datei unter dieser URL in einem neuen Tab tatsächlich lädt. |
| 3. Fehlende oder fehlerhafte link-Tags | Kein Icon-Link, ein Tippfehler in rel="icon" oder Tags außerhalb des <head> hindern den Browser alle daran, die Datei zu finden. | Validiere das Markup in deinem gemeinsamen Layout. |
| 4. Falsches Format oder falsche Größe | Ein zu kleines Favicon, der falsche MIME-Typ oder ein beschädigtes .ico können stillschweigend nicht rendern. | Exportiere neu in einer unterstützten Größe und einem unterstützten Format und liefere es mit dem richtigen Content-Type aus. Vergleiche ICO und PNG und prüfe die erforderlichen Favicon-Größen. |
| 5. Apple-Touch-Icon aktualisiert nicht | iOS ignoriert favicon.ico und verwendet das apple-touch-icon. Wenn es fehlt oder veraltet ist, zeigt der Homescreen das Falsche. | Korrigiere den apple-touch-icon-Link, entferne die Seite dann vom Homescreen und füge sie erneut hinzu. |
| 6. Probleme mit dem Manifest-Icon | Auf Android und bei installierten PWAs kommt das Icon aus manifest.json. Ein falscher Pfad oder eine falsche Größe dort macht die Homescreen- und Splash-Icons kaputt. | Korrigiere die Icon-Pfade und -Größen in manifest.json und installiere die App danach neu. |
| 7. Der Build-Output entfernt deine Tags | Manche Frameworks schreiben den Dokument-head um, sodass von Hand geschriebene link-Tags den Build nicht überleben. | Folge dem Guide für deinen Stack: Next.js, React, WordPress oder Shopify. |
| 8. Ein Theme oder CMS fügt sein eigenes Icon ein | Ein Theme kann sein eigenes Site-Icon setzen, das das im Markup hinzugefügte überschreibt. | Setze das Icon über die eigene Site-Icon-Einstellung der Plattform statt im Template. |
| 9. Ein Build-Cache liefert eine veraltete Datei | Der Build- oder Plattform-Cache liefert weiterhin das alte Icon aus, selbst nach einem Redeploy. | Leere den Build-/Plattform-Cache, mach ein Redeploy und prüfe erneut. |
Wo du als Nächstes suchst
Format oder Größe verdächtig? Vergleiche ICO und PNG im Glossar und prüfe die erforderlichen Favicon-Größen. Ärger mit iOS? Lies den Eintrag zu apple-touch-icon. Ärger mit dem Manifest? Lies, was manifest.json ist.
Die Ursachen 7 bis 9 sind die plattformspezifischen: Manche Frameworks und CMS überschreiben oder cachen das Favicon auf eine Weise, wie es reines HTML nicht tut. Der Build-Output kann deine Tags entfernen, ein Theme kann sein eigenes Icon einfügen, oder ein Build-Cache kann eine veraltete Datei ausliefern. Die Guides zu Next.js, React, WordPress und Shopify decken jeweils ihre eigene Variante davon ab.
So leerst du ein gecachtes Favicon
- 1
Häng einen Versions-Query-String an
Ändere das href des Links auf /favicon.ico?v=2, damit der Browser eine frische Datei lädt.
- 2
Mach einen Hard-Refresh der Seite
Verwende Cmd+Shift+R (macOS) oder Ctrl+F5 (Windows), um den Cache zu umgehen.
- 3
Leere jeden CDN-Cache
Wenn ein CDN deiner Site vorgeschaltet ist, invalidiere den Favicon-Pfad, damit die Edge-Knoten die neue Datei ausliefern.
Cache geleert und es ist immer noch gleich?
| Was du siehst | Was es meist bedeutet | Nächster Schritt |
|---|---|---|
| 404: Favicon nicht gefunden | Der Browser hat /favicon.ico angefragt und der Server hatte dort nichts. Häufig direkt nach einem Framework-Build, der die Datei nie in den Output kopiert hat. | Öffne /favicon.ico direkt. Kommt ein 404, ist die Datei nicht deployt. Das ist ein Build- oder Pfadproblem, kein Cache-Problem, also wird das Beheben des Caches nie helfen. |
| Das alte Icon lädt weiterhin unter der direkten URL | /favicon.ico zu öffnen zeigt das ALTE Bild, die Datei selbst ist also veraltet. Kein noch so häufiger Hard-Refresh wird sie bewegen. | Ein Build-Schritt oder ein CDN liefert eine alte Datei aus. Leere den Plattform-/CDN-Cache, mach ein Redeploy und öffne dann die direkte URL erneut, bevor du den Tab prüfst. |
| Richtige Datei unter der URL, falsches Icon im Tab | Die direkte URL ist korrekt, aber der Tab ist weiterhin falsch. Ein zweites link-Tag (von einem Theme, einem Plugin oder ein Framework-Standard) sticht deins aus. | Sieh dir den Quelltext an und zähl die rel="icon"-Tags. Der Browser nimmt das letzte, das er versteht, also entferne den Verlierer, statt ein drittes hinzuzufügen. |
| In einem Browser okay, in einem anderen fehlend | Jeder Browser, und jedes Chrome-Profil, hat seinen eigenen Favicon-Speicher, und manche halten einen veralteten Eintrag tagelang. | Bestätige es in einem frischen privaten Fenster oder einem sauberen Profil, bevor du entscheidest, dass die Site schuld ist. |
Arbeite diese Tabelle von oben nach unten durch. Jede Zeile schließt eine Schicht aus, sodass du aufhörst, über den Cache zu rätseln, und anfängst zu lesen, was der Server tatsächlich zurückgibt.
Größen, auf die es bei den Fehlerfällen ankommt
Bestätige die Lösung mit einem Scan
Raten ist langsam. Führe einen automatisierten Scan aus, der deine Live-Site abruft, jedes gefundene Favicon-Tag auflistet und die fehlenden oder kaputten markiert, damit du weißt, dass die Lösung wirklich angekommen ist.
Willst du auch manuell über Browser und Geräte hinweg testen? Sieh dir an, wie du dein Favicon testest und prüfst.
Häufig gestellte Fragen
Warum wird mein Favicon nicht angezeigt?
Die häufigsten Ursachen sind aggressives Browser-Caching, ein falscher oder relativer Dateipfad und fehlende oder fehlerhafte <link>-Tags im <head>. Mach einen Hard-Refresh, bestätige, dass /favicon.ico direkt aufgelöst wird, und prüfe deine Tags.
Wie erzwinge ich, dass mein Favicon aktualisiert wird?
Häng einen Versions-Query-String an die Icon-URL an, z. B. /favicon.ico?v=2. Dadurch behandelt der Browser es als neue Datei. Mach dann einen Hard-Refresh oder leere den Cache der Site.
Warum wird mein Favicon auf dem Desktop, aber nicht auf dem iPhone angezeigt?
iOS verwendet das apple-touch-icon, nicht favicon.ico. Wenn dieser 180×180-PNG-Link fehlt, greift iOS auf einen Screenshot zurück. Füge einen apple-touch-icon-Link hinzu und füge die Seite erneut zum Homescreen hinzu.
Wie lange dauert es, bis ein Favicon in der Google-Suche aktualisiert wird?
Google aktualisiert Favicons, wenn es deine Site erneut crawlt, was Tage bis Wochen dauern kann. Stelle sicher, dass das Icon mindestens 48×48 groß ist, mit einem gültigen rel=icon-Tag referenziert wird und für den Googlebot erreichbar ist.
Warum steht dort Favicon nicht gefunden, oder es kommt ein 404?
Der Browser hat das Icon per Pfad angefragt und der Server hatte dort nichts. Öffne /favicon.ico direkt in einem neuen Tab: Kommt ein 404, wurde die Datei nie unter diese URL deployt, meist ein Framework-Build, der sie nicht in den Output kopiert hat, oder ein falscher Pfad im link-Tag. Korrigiere, wo die Datei landet, nicht den Cache.
Mein Favicon fehlt: wo sollte die Datei eigentlich liegen?
Für das klassische Tab-Icon eine echte Datei in der Site-Wurzel, damit /favicon.ico aufgelöst wird. Frameworks ändern, wie sie dorthin gelangt: Next.js liest app/favicon.ico, Vite und die meisten SPAs kopieren public/ in die Wurzel, und WordPress oder Shopify liefern es über eine Site-Icon-Einstellung statt über eine Datei aus. Wenn das Tag irgendwohin zeigt, wo der Build nie eine Datei geschrieben hat, ist das Icon 'fehlend', obwohl deine Quelle korrekt aussieht.
Ich habe versucht, den Cache zu leeren, und es ist immer noch gleich. Was jetzt?
Hör auf, Caches zu leeren, und lies, was der Server zurückgibt. Öffne /favicon.ico direkt: Ein 404 bedeutet ein Build- oder Pfadproblem, ein altes Bild bedeutet eine veraltete Build- oder CDN-Datei, und die richtige Datei mit dem falschen Icon im Tab bedeutet, dass ein zweites link-Tag gewinnt. Jedes Ergebnis weist auf eine andere Lösung hin. Siehe die Eskalationstabelle oben.