App Router lahko ustvari elemente ikon iz datotek z dogovorjenimi imeni ali iz objekta metadata. Oba pristopa sta veljavna, a njuno mešanje brez jasnega pravila hitro ustvari medsebojno nasprotujoče si navedbe.
Izberite pravila poimenovanja datotek
favicon.ico postavite v koren mape app. Podprte datoteke icon so lahko v segmentu poti, apple-icon pa opisuje ikono za naprave Apple.
Next.js zazna te datoteke, določi uporabne atribute in doda ustrezne elemente link v head. Ikona v segmentu velja za poti v tem segmentu.
| Datoteka | Mesto | Namen |
|---|---|---|
| favicon.ico | app/ | Nadomestna ikona strani |
| icon.svg | segment app | Ikona brskalnika |
| apple-icon.png | segment app | Ikona Apple |
| manifest.webmanifest | segment app | Manifest za namestitev |
Za izrecne poti uporabite metadata
Če so datoteke v public ali pri gostitelju slik, navedite metadata.icons v postavitvi ali strani. Določite icon, apple in po potrebi shortcut z doslednimi URL-ji.
Metapodatki podrejenega segmenta lahko nadomestijo sestavljena polja, podedovana od nadrejenega. Preglejte končni head na več poteh, namesto da predpostavite, da so se vsi nadrejeni vnosi združili.
Za ikono, ustvarjeno na zahtevo, Next.js podpira tudi icon.tsx ali icon.js. Funkcija vrne slikovne podatke z izrecno velikostjo in vrsto vsebine. Ta pristop uporabite za res dinamične sestave: statično datoteko je lažje predpomniti, pregledati in dosledno streči pri različnih objavah.
Povežite manifest in njegove ikone
Statična datoteka manifesta ali funkcija manifest.ts lahko opiše ime aplikacije, barve in namestitvene ikone. URL-ji ikon manifesta morajo biti javni in kazati na datoteke z navedenimi dimenzijami.
Vlogo manifesta ločite od ikone zavihka: namestitvena ikona 512×512 ne nadomesti samodejno icon.svg ali favicon.ico.
Preizkusite v produkciji
Izvedite produkcijsko gradnjo, odprite po eno pot iz vsakega prizadetega segmenta in preglejte elemente link. Nato neposredno odprite URL vsake datoteke ter potrdite, da ga vmesna programska oprema ne prestreže.
Če uporabljate basePath ali CDN, preizkusite ustvarjene URL-je v objavljenem okolju. Lokalno delovanje ne razkrije vedno napačne javne osnovne poti ali pravila prepisovanja.
Primarni viri
Pogosta vprašanja
Ali moram elemente link napisati ročno?
Ne. Ustvarijo jih lahko pravila datotek ali metadata.icons. Izberite en jasen vir resnice.
Kam postavim favicon.ico?
Pri App Router je pravilo favicon.ico podprto v korenu mape app.
Ali manifest.ts nadomesti icon.svg?
Ne. Manifest med drugim opisuje namestitvene ikone, icon.svg pa neposredno zagotavlja ikono brskalnika.