App Router kan generere ikonelementer fra filer med bestemte navne eller fra metadata-objektet. Begge metoder er gyldige, men blander du dem uden en klar regel, kan det nemt skabe konkurrerende angivelser.
Vælg filkonventioner
Læg favicon.ico i roden af app. Understøttede icon-filer kan ligge i et rutesegment, mens apple-icon beskriver ikonet til Apple-enheder.
Next.js registrerer disse filer, fastlægger relevante attributter og tilføjer de tilsvarende link-elementer i head. Et ikon i et segment gælder for ruterne i det segment.
| Fil | Placering | Formål |
|---|---|---|
| favicon.ico | app/ | Websitets reserveikon |
| icon.svg | app-segment | Browserikon |
| apple-icon.png | app-segment | Apple-ikon |
| manifest.webmanifest | app-segment | Manifest til installation |
Brug metadata til udtrykkelige stier
Hvis filerne ligger i public eller på en billedserver, skal du angive metadata.icons i et layout eller på en side. Angiv icon, apple og efter behov shortcut med ensartede URL'er.
Metadata fra et undersegment kan erstatte sammensatte felter, der er arvet fra oversegmentet. Undersøg den endelige head på flere ruter frem for at antage, at alle oversegmentets poster bliver slået sammen.
Til et ikon, der genereres efter behov, understøtter Next.js også icon.tsx eller icon.js. Funktionen returnerer billeddata med en udtrykkelig størrelse og indholdstype. Brug denne metode til reelt dynamiske sammensætninger: en statisk fil er lettere at cache, undersøge og levere ensartet på tværs af udgivelser.
Forbind manifestet og dets ikoner
En statisk manifestfil eller en manifest.ts-funktion kan beskrive appnavn, farver og ikoner til installation. Manifestets ikon-URL'er skal være offentlige og pege på filer med de angivne mål.
Hold manifestets formål adskilt fra fanens favicon: et installationsikon på 512×512 erstatter ikke automatisk icon.svg eller favicon.ico.
Test i produktion
Kør et produktionsbuild, åbn en rute fra hvert berørt segment, og undersøg link-elementerne. Åbn derefter hver fils URL direkte, og bekræft, at middleware ikke griber ind i anmodningen.
Bruger du basePath eller en CDN, skal du teste de genererede URL'er i det udgivne miljø. Lokal adfærd afslører ikke altid en forkert offentlig basissti eller omskrivningsregel.
Primære kilder
Ofte stillede spørgsmål
Skal man skrive link-elementerne i hånden?
Nej. Filkonventioner eller metadata.icons kan generere dem. Vælg én tydelig kilde til angivelserne.
Hvor skal favicon.ico ligge?
Med App Router understøttes favicon.ico-konventionen i roden af mappen app.
Erstatter manifest.ts icon.svg?
Nej. Manifestet beskriver blandt andet ikoner til installation, mens icon.svg leverer browserikonet direkte.