App Router kan skapa ikonelement från filer med särskilda namn eller från metadata-objektet. Båda metoderna fungerar, men att blanda dem utan en tydlig regel kan lätt ge konkurrerande deklarationer.
Välj filkonventioner
Placera favicon.ico i roten av app. Ikonfiler i format som stöds kan ligga i ett ruttsegment, medan apple-icon beskriver ikonen för Apple-enheter.
Next.js upptäcker filerna, bestämmer lämpliga attribut och lägger till motsvarande link-element i head. En ikon i ett segment gäller för rutterna i det segmentet.
| Fil | Placering | Syfte |
|---|---|---|
| favicon.ico | app/ | Reservikon för webbplatsen |
| icon.svg | segment i app | Webbläsarikon |
| apple-icon.png | segment i app | Apple-ikon |
| manifest.webmanifest | segment i app | Manifest för installation |
Använd metadata för uttryckliga sökvägar
Om filerna finns i public eller på en bildserver deklarerar du metadata.icons i en layout eller sida. Ange icon, apple och vid behov shortcut med konsekventa webbadresser.
Metadata från ett underordnat segment kan ersätta sammansatta fält som ärvts från det överordnade. Inspektera det färdiga head på flera rutter i stället för att anta att alla överordnade poster har slagits samman.
För en ikon som genereras vid behov stöder Next.js även icon.tsx eller icon.js. Funktionen returnerar bilddata med uttrycklig storlek och innehållstyp. Spara metoden för dynamiska motiv: en statisk fil är enklare att cacha, inspektera och leverera konsekvent mellan driftsättningar.
Koppla ihop manifestet och dess ikoner
En statisk manifestfil eller en manifest.ts-funktion kan beskriva appens namn, färger och ikoner för installation. Manifestikonernas adresser måste vara offentliga och peka på filer med de deklarerade dimensionerna.
Håll manifestets roll åtskild från faviconen i fliken: en installationsikon på 512×512 ersätter inte automatiskt icon.svg eller favicon.ico.
Testa i produktion
Kör ett produktionsbygge, öppna en rutt från varje berört segment och granska link-elementen. Öppna sedan varje filadress direkt och kontrollera att middleware inte fångar upp den.
Om du använder basePath eller ett CDN ska du testa de genererade adresserna i den driftsatta miljön. Lokalt beteende avslöjar inte alltid en felaktig publik basadress eller omskrivningsregel.
Primärkällor
Vanliga frågor
Behöver jag skriva link-element för hand?
Nej. Filkonventioner eller metadata.icons kan generera dem. Välj en tydlig källa som styr konfigurationen.
Var ska favicon.ico placeras?
Med App Router stöds konventionen favicon.ico i roten av katalogen app.
Ersätter manifest.ts icon.svg?
Nej. Manifestet beskriver bland annat ikoner för installation, medan icon.svg direkt tillhandahåller webbläsarens ikon.