Der App Router kann Symbol-Elemente aus Dateien mit festgelegten Namen oder aus dem metadata-Objekt erzeugen. Beide Ansätze funktionieren. Werden sie ohne klare Regel kombiniert, entstehen jedoch leicht widersprüchliche Deklarationen.
Dateikonventionen verwenden
Lege favicon.ico im Stammverzeichnis von app ab. Unterstützte icon-Dateien können in einem Routensegment liegen, während apple-icon das Symbol für Apple-Geräte beschreibt.
Next.js erkennt diese Dateien, ermittelt die passenden Attribute und fügt die entsprechenden link-Elemente in den head ein. Ein Symbol in einem Segment gilt für die Routen dieses Segments.
| Datei | Speicherort | Zweck |
|---|---|---|
| favicon.ico | app/ | Ersatzsymbol der Website |
| icon.svg | app-Segment | Browser-Symbol |
| apple-icon.png | app-Segment | Apple-Symbol |
| manifest.webmanifest | app-Segment | Manifest für die Installation |
Explizite Pfade mit metadata festlegen
Liegen die Dateien in public oder auf einem Bildserver, lege metadata.icons in einem Layout oder einer Seite fest. Verwende für icon, apple und gegebenenfalls shortcut konsistente URLs.
Metadaten eines untergeordneten Segments können zusammengesetzte Felder des übergeordneten Segments ersetzen. Prüfe den fertigen head auf mehreren Routen, statt anzunehmen, dass alle übergeordneten Einträge zusammengeführt werden.
Für bei Bedarf erzeugte Symbole unterstützt Next.js auch icon.tsx oder icon.js. Die Funktion liefert Bilddaten mit ausdrücklicher Größe und Inhaltstyp. Verwende diesen Ansatz für tatsächlich dynamische Motive: Eine statische Datei lässt sich einfacher zwischenspeichern, prüfen und über mehrere Bereitstellungen hinweg einheitlich ausliefern.
Manifest und Symbole verknüpfen
Eine statische Manifestdatei oder eine Funktion in manifest.ts kann App-Namen, Farben und installierbare Symbole beschreiben. Die Symbol-URLs im Manifest müssen öffentlich sein und auf Dateien mit den angegebenen Abmessungen zeigen.
Trenne den Zweck des Manifests vom Tab-Favicon: Ein Installationssymbol mit 512×512 ersetzt nicht automatisch icon.svg oder favicon.ico.
In der Produktionsumgebung testen
Erstelle einen Produktionsbuild, öffne eine Route aus jedem betroffenen Segment und prüfe die link-Elemente. Öffne anschließend jede Datei-URL direkt und stelle sicher, dass keine Middleware sie abfängt.
Wenn du basePath oder ein CDN verwendest, teste die erzeugten URLs in der veröffentlichten Umgebung. Lokal fallen eine falsche öffentliche Basis oder fehlerhafte Rewrite-Regel nicht immer auf.
Primärquellen
Häufige Fragen
Muss ich link-Elemente von Hand schreiben?
Nein. Dateikonventionen oder metadata.icons können sie erzeugen. Entscheide dich für eine eindeutige maßgebliche Quelle.
Wohin gehört favicon.ico?
Im App Router wird die Dateikonvention favicon.ico im Stammverzeichnis des Ordners app unterstützt.
Ersetzt manifest.ts die Datei icon.svg?
Nein. Das Manifest beschreibt unter anderem installierbare Symbole. icon.svg stellt dagegen direkt das Browser-Symbol bereit.