So beheben Sie den lästigen 404-Fehler „favicon.ico nicht gefunden“

May 31, 2026 · 4 min read

Sie öffnen die Browser-Konsole auf einer neuen HTML-Seite und sehen es sofort: Failed to load resource: the server responded with a status of 404 (Not Found) — favicon.ico. Sie haben kein Favicon referenziert. Sie haben keines angefordert. Und trotzdem erscheint es jedes Mal und verstopft Ihre Logs.

Hier erfahren Sie, was tatsächlich dahintersteckt und wie Sie das Problem richtig beheben.

Das Wichtigste auf einen Blick

Browser, Crawler und Monitoring-Tools fordern /favicon.ico automatisch vom Site-Root an – auch ohne HTML-Referenz.
Der 404-Fehler ist harmlos, verschmutzt aber Server-Logs und verdeckt echte Probleme.
Die zuverlässigste Lösung besteht darin, eine echte favicon.ico-Datei im Site-Root abzulegen.
Moderne Setups sollten außerdem SVG-, PNG- und Apple-Touch-Icon-Varianten über <link rel="icon"> im HTML-<head> deklarieren.
Frameworks wie Next.js regeln die Favicon-Platzierung über Dateikonventionen, aber die Anforderung einer Datei auf Root-Ebene bleibt dieselbe.

Warum Browser favicon.ico anfordern, ohne dass Sie darum bitten

Browser warten nicht darauf, dass Ihr HTML ihnen mitteilt, wo das Favicon liegt. Gemäß dem WHATWG-HTML-Standard senden Browser automatisch eine GET-Anfrage an /favicon.ico im Site-Root, wenn eine Seite kein explizites <link rel="icon">-Tag enthält. Dies ist die implizite Favicon-Erkennung – ein eingebautes Browser-Verhalten, kein Fehler in Ihrem Code.

Und es sind nicht nur Browser. RSS-Reader, Slack-Link-Vorschauen, Suchmaschinen-Crawler und Uptime-Monitoring-Tools stellen dieselbe automatische Anfrage. Selbst wenn Ihr Browser ein <link rel="icon">-Tag berücksichtigt, können andere Clients /favicon.ico weiterhin direkt aufrufen.

Der Fehler ist harmlos, aber störend. Er bricht Ihre Website nicht, verschmutzt aber Server-Logs, trübt Monitoring-Dashboards und erschwert das Erkennen echter Fehler.

Die richtige Lösung: Eine echte favicon.ico im Site-Root bereitstellen

Die zuverlässigste Lösung ist, eine echte favicon.ico-Datei im Site-Root abzulegen, damit die automatische Anfrage statt eines 404 eine 200-Antwort zurückgibt.

Sie können eine Datei unter favicon.io oder realfavicongenerator.net generieren. Legen Sie die Datei hier ab:

/favicon.ico   ← Browser und Crawler fordern diese Datei automatisch an

Dies funktioniert unabhängig davon, welche anderen Favicon-Deklarationen Sie in Ihrem HTML haben.

Modernes Favicon-Setup: Die vollständige HTML-Deklaration

Sobald Ihre Root-favicon.ico vorhanden ist, fügen Sie explizite Deklarationen in Ihrem <head> für moderne Browser hinzu. Die MDN Web Docs zu rel=“icon” empfehlen die Verwendung von rel="icon" anstelle des veralteten rel="shortcut icon".

<!-- Die /favicon.ico-Datei im Site-Root wird automatisch bereitgestellt – kein HTML-Tag erforderlich -->

<!-- PNG-Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">

<!-- SVG-Favicon für Browser, die es unterstützen -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon für iOS-Startbildschirm-Lesezeichen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web-App-Manifest für installierbare PWAs -->
<link rel="manifest" href="/manifest.webmanifest">

Ein paar wichtige Hinweise dazu:

SVG-Favicons skalieren in jeder Größe perfekt und unterstützen den Dunkelmodus über CSS prefers-color-scheme innerhalb der SVG-Datei selbst.
Apple Touch Icon ist speziell für iOS gedacht, wenn ein Benutzer Ihre Website auf dem Startbildschirm speichert. Es ist von Ihrem Favicon getrennt und typischerweise ein 180×180-Pixel-PNG.
Web-App-Manifest-Icons dienen einem anderen Zweck – sie definieren Icons für installierte PWAs. Sie ersetzen Ihr Favicon nicht und verhindern auch nicht den /favicon.ico-404-Fehler.

Was ist mit Frameworks?

Framework-spezifisches Tooling übernimmt einen Teil davon automatisch. Beispielsweise behandelt der Next.js App Router eine favicon.ico-Datei, die im app/-Verzeichnis abgelegt wird, als spezielle Dateikonvention und generiert die korrekten Metadaten automatisch. Andere Frameworks haben ähnliche Konventionen – prüfen Sie die Dokumentation Ihres Frameworks. Unabhängig davon, wie das Favicon konfiguriert ist, empfiehlt es sich dennoch sicherzustellen, dass Anfragen an /favicon.ico korrekt beantwortet werden, da Browser, Crawler und andere Clients diesen Pfad möglicherweise direkt aufrufen.

Schnelldiagnose: Browser-DevTools prüfen

Öffnen Sie den Network-Tab in den DevTools, laden Sie die Seite neu und filtern Sie nach favicon. Wenn Sie einen 404-Fehler für favicon.ico sehen, fehlt Ihre Root-Datei oder wird nicht korrekt bereitgestellt. Eine 200-Antwort bedeutet, dass alles in Ordnung ist.

Fazit

Legen Sie eine echte favicon.ico-Datei im Site-Root ab – diese einzelne Datei behebt den automatischen 404-Fehler durch Browser, Crawler und Monitoring-Tools gleichermaßen. Fügen Sie anschließend explizite <link rel="icon">-Deklarationen für Ihr SVG-Favicon, PNG-Fallback und Apple Touch Icon hinzu, damit moderne Browser das bestmögliche Format erhalten. Saubere Logs, korrekte Icons, keine Workarounds erforderlich.

Häufig gestellte Fragen

Sie können ihn aus Ihrer Konsole herausfiltern, aber die zugrundeliegende Anfrage trifft weiterhin Ihren Server und erscheint in Logs, Analytics und Monitoring-Tools. Eine echte favicon.ico-Datei bereitzustellen ist eine einmalige Lösung, die das Problem an seiner Quelle behebt, anstatt es zu verstecken. Außerdem ist es deutlich weniger Aufwand, als Filter in mehreren Tools zu konfigurieren.

Ja. Viele Clients – darunter ältere Crawler, RSS-Reader und Link-Vorschau-Bots – ignorieren HTML-Link-Tags und fordern /favicon.ico direkt vom Site-Root an. Ohne eine Datei dort geben diese Anfragen 404 zurück. Sowohl eine Root-favicon.ico als auch moderne Link-Deklarationen bereitzustellen deckt zuverlässig jeden Client ab.

Eine ICO-Datei mit mehreren Auflösungen, die 16×16-, 32×32- und 48×48-Pixel-Versionen enthält, deckt nahezu jeden Anwendungsfall ab. Die meisten Favicon-Generatoren erstellen dies automatisch. Wenn Sie nur eine einzige Größe benötigen, ist 32×32 die sicherste Standardgröße, da sie in Browser-Tabs und Lesezeichenleisten auf allen gängigen Plattformen gut funktioniert.

Browser cachen Favicons aggressiv, manchmal tagelang. Versuchen Sie einen Hard-Refresh, leeren Sie den Browser-Cache oder testen Sie in einem privaten Fenster. Überprüfen Sie außerdem, ob die Datei tatsächlich vom Site-Root bereitgestellt wird und eine erfolgreiche Antwort zurückgibt. Wenn sie dort geladen wird, sollte der 404-Fehler verschwinden, sobald der Cache abläuft.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.