App Router var izveidot ikonu elementus no ierastiem failu nosaukumiem vai metadata objekta. Abas pieejas ir derīgas, taču to jaukšana bez skaidra principa var viegli radīt savstarpēji konkurējošas deklarācijas.
Izvēlieties failu nosaukumu principus
Ievietojiet favicon.ico mapes app saknē. Atbalstītie icon faili var atrasties maršruta segmentā, savukārt apple-icon apraksta Apple ierīcēm paredzēto ikonu.
Next.js atrod šos failus, nosaka vajadzīgos atribūtus un pievieno atbilstošos link elementus sadaļai head. Segmentā ievietota ikona attiecas uz šī segmenta maršrutiem.
| Fails | Atrašanās vieta | Mērķis |
|---|---|---|
| favicon.ico | app/ | Vietnes rezerves ikona |
| icon.svg | app segments | Pārlūka ikona |
| apple-icon.png | app segments | Apple ikona |
| manifest.webmanifest | app segments | Uzstādīšanas manifests |
Izmantojiet metadata konkrētiem ceļiem
Ja faili atrodas public vai attēlu serverī, norādiet metadata.icons izkārtojumā vai lapā. Iestatiet icon, apple un, ja nepieciešams, shortcut ar savstarpēji saskaņotiem URL.
Bērna segmenta metadati var aizstāt no vecāka mantotus saliktus laukus. Pārbaudiet galīgo head vairākos maršrutos, nevis pieņemiet, ka visi vecāka ieraksti ir apvienoti.
Pēc pieprasījuma ģenerētām ikonām Next.js atbalsta arī icon.tsx vai icon.js. Funkcija atgriež attēla datus ar skaidri norādītu izmēru un satura tipu. Izmantojiet to patiesi dinamiskām kompozīcijām: statisku failu ir vienkāršāk glabāt kešatmiņā, pārbaudīt un vienādi pasniegt dažādos izvietojumos.
Savienojiet manifestu ar tā ikonām
Statisks manifesta fails vai manifest.ts funkcija var aprakstīt lietotnes nosaukumu, krāsas un uzstādāmās ikonas. Ikonu URL manifestā jābūt publiskiem un jānorāda uz failiem ar deklarētajiem izmēriem.
Nošķiriet manifesta lomu no cilnes favicon: 512×512 uzstādīšanas ikona automātiski neaizstāj icon.svg vai favicon.ico.
Pārbaudiet produkcijas vidē
Izveidojiet produkcijas būvējumu, atveriet pa vienam maršrutam no katra skartā segmenta un pārbaudiet link elementus. Pēc tam atveriet katra faila URL tieši un pārliecinieties, ka starpprogrammatūra to nepārtver.
Ja izmantojat basePath vai CDN, pārbaudiet izveidotos URL izvietotajā vidē. Vietējā darbība ne vienmēr atklāj nepareizu publisko pamatceļu vai pārrakstīšanas noteikumu.
Pirmavoti
Bieži uzdotie jautājumi
Vai link elementi jāraksta pašam?
Nē. Tos var ģenerēt failu nosaukumu principi vai metadata.icons. Izvēlieties vienu skaidru patiesības avotu.
Kur jāievieto favicon.ico?
App Router atbalsta favicon.ico faila principu app mapes saknē.
Vai manifest.ts aizstāj icon.svg?
Nē. Manifests līdzās citiem datiem apraksta uzstādāmās ikonas, bet icon.svg tieši nodrošina pārlūka ikonu.