App Router kan lage ikonelementer fra filer med standardnavn eller fra metadata-objektet. Begge fremgangsmåtene fungerer, men en blanding uten tydelige regler kan lett gi konkurrerende deklarasjoner.
Velg filkonvensjoner
Legg favicon.ico i roten av app. Støttede icon-filer kan ligge i et rutesegment, mens apple-icon beskriver ikonet som er beregnet på Apple-enheter.
Next.js finner disse filene, bestemmer relevante attributter og legger tilsvarende link-elementer i head. Et ikon plassert i et segment gjelder rutene i det segmentet.
| Fil | Plassering | Formål |
|---|---|---|
| favicon.ico | app/ | Reserveikon for nettstedet |
| icon.svg | app-segment | Nettleserikon |
| apple-icon.png | app-segment | Apple-ikon |
| manifest.webmanifest | app-segment | Manifest for installasjon |
Bruk metadata for eksplisitte stier
Hvis filene ligger i public eller på en bildetjener, angir du metadata.icons i en layout eller side. Oppgi icon, apple og ved behov shortcut med konsekvente nettadresser.
Metadata fra et undersegment kan erstatte sammensatte felt som er arvet fra oversegmentet. Undersøk den endelige head på flere ruter i stedet for å anta at alle overordnede oppføringer ble slått sammen.
Next.js støtter også icon.tsx eller icon.js for ikoner som genereres ved behov. Funksjonen returnerer bildedata med eksplisitt størrelse og innholdstype. Bruk dette til dynamisk innhold: en statisk fil er enklere å mellomlagre, undersøke og levere konsekvent på tvers av publiseringer.
Koble sammen manifestet og ikonene
En statisk manifestfil eller en manifest.ts-funksjon kan beskrive appnavn, farger og ikoner for installasjon. Nettadressene til manifestikonene må være offentlige og vise til filer med de angitte målene.
Hold manifestets rolle atskilt fra faviconet i fanen. Et installasjonsikon på 512×512 erstatter ikke automatisk icon.svg eller favicon.ico.
Test i produksjon
Kjør et produksjonsbygg, åpne én rute fra hvert berørt segment og undersøk link-elementene. Åpne deretter hver filadresse direkte og kontroller at mellomvare ikke fanger opp forespørslene.
Hvis du bruker basePath eller et CDN, test de genererte nettadressene i det publiserte miljøet. Lokal oppførsel avslører ikke alltid en feil offentlig basissti eller omskrivingsregel.
Primærkilder
Vanlige spørsmål
Må du skrive link-elementene for hånd?
Nei. Filkonvensjoner eller metadata.icons kan generere dem. Velg én tydelig kilde til konfigurasjonen.
Hvor skal favicon.ico ligge?
Med App Router støttes favicon.ico-konvensjonen i roten av app-mappen.
Erstatter manifest.ts icon.svg?
Nei. Manifestet beskriver blant annet ikoner for installasjon, mens icon.svg leverer selve nettleserikonet.