Next.js-Favicon wird nicht angezeigt? So behebst du es
Im App Router baut Next.js die Icon-Links aus Dateien im app-Verzeichnis. Stimmt der Dateiname nicht, wird gar nichts ausgegeben. Im Pages Router gibt es überhaupt keine Konvention. Finde heraus, welchen Fall du hast, und die Lösung liegt auf der Hand.
Welchen Router nutzt du?
Der App Router liest Dateien namens favicon.ico, icon und apple-icon aus dem app-Verzeichnis, ermittelt deren Größe und fügt die Link-Tags zur Build-Zeit ein. Ist die Datei falsch benannt oder liegt sie im falschen Ordner, wird kein Tag erzeugt. Es gibt keine Fehlermeldung, nur einen leeren Tab.
Der Pages Router kennt keine solche Konvention. Es erscheint nichts, sofern du die Dateien nicht in public ablegst und die Link-Tags selbst in einem eigenen Head deklarierst. Ein Projekt, das nur halb von einem zum anderen migriert wurde, ist der klassische Grund, warum ein Favicon auf einer Route funktioniert und auf einer anderen nicht.
Wo die Datei liegen muss
| Datei | Router | Was Next.js tut |
|---|---|---|
| app/favicon.ico | App Router | Wird unter /favicon.ico ausgeliefert, Tag wird automatisch eingefügt |
| app/icon.png | App Router | Wird beim Build automatisch dimensioniert und verlinkt |
| public/favicon.ico | Pages Router | Erscheint nur, wenn du das Link-Tag von Hand hinzufügst |
In dreißig Sekunden geprüft
- 1
Rufe die Icon-URL direkt auf
Lade /favicon.ico (oder /icon) in einem neuen Tab. Ein 404 bedeutet, dass die Datei nicht dort liegt, wo Next sie erwartet: ein Build-Problem, kein Cache-Problem.
- 2
Öffne den Quelltext und suche nach rel="icon"
Fehlt der Icon-Link im Head, hat die Dateikonvention nie gegriffen. Prüfe, ob der Dateiname exakt stimmt: favicon.ico, icon.png, apple-icon.png.
- 3
Schließe den Cache zuletzt aus
Erst wenn die Datei aufgelöst wird und das Tag vorhanden ist, solltest du in einem privaten Fenster einen Hard-Reload machen. In neun von zehn Fällen lag das Problem vor dem Cache.
Next.js-Favicon wird nicht angezeigt: FAQ
Warum wird mein Next.js-Favicon nicht angezeigt?
Im App Router, weil die Datei falsch benannt ist oder nicht im app-Verzeichnis liegt, sodass kein Link-Tag erzeugt wird. Im Pages Router, weil es keine automatische Konvention gibt und du die Tags nicht in einem eigenen Head ergänzt hast. Rufe /favicon.ico direkt auf. Ein 404 bestätigt ein Datei- oder Platzierungsproblem.
Brauche ich favicon.ico, wenn ich app/icon.png habe?
Behalte beide. icon.png bedient moderne Browser in höherer Qualität; favicon.ico ist das, was ältere Browser, Feed-Reader und manche Link-Vorschau-Crawler weiterhin per Pfad anfordern.
Warum erscheint das Favicon auf einer Seite, aber nicht auf einer anderen?
Meist ein Projekt, das App Router und Pages Router mischt. Die app-Verzeichnis-Konvention gilt nur für Routen, die davon gerendert werden; Pages-Router-Routen brauchen eigene Link-Tags in _document oder einem eigenen Head.