App Router može generirati elemente ikona iz datoteka imenovanih prema konvenciji ili iz objekta metadata. Oba su pristupa valjana, ali njihovo miješanje bez jasnog pravila lako stvara konkurentne deklaracije.
Odaberite konvencije datoteka
Smjestite favicon.ico u korijen mape app. Podržane datoteke icon mogu biti u segmentu rute, dok apple-icon opisuje ikonu namijenjenu Apple uređajima.
Next.js otkriva te datoteke, određuje potrebne atribute i dodaje odgovarajuće elemente link u head. Ikona smještena u segment primjenjuje se na rute tog segmenta.
| Datoteka | Lokacija | Namjena |
|---|---|---|
| favicon.ico | app/ | Zamjenska ikona stranice |
| icon.svg | segment app | Ikona preglednika |
| apple-icon.png | segment app | Ikona za Apple |
| manifest.webmanifest | segment app | Manifest za instalaciju |
Koristite metapodatke za izričite putanje
Ako su datoteke u public ili na poslužitelju slika, deklarirajte metadata.icons u rasporedu ili stranici. Navedite icon, apple i po potrebi shortcut uz dosljedne URL-ove.
Metapodaci podređenog segmenta mogu zamijeniti složena polja naslijeđena od nadređenoga. Provjerite konačni head na više ruta umjesto da pretpostavljate da je svaki nadređeni unos spojen.
Za ikonu izrađenu na zahtjev Next.js podržava i icon.tsx ili icon.js. Funkcija vraća podatke slike uz izričite dimenzije i vrstu sadržaja. Taj pristup zadržite za doista dinamične kompozicije: statičnu datoteku lakše je predmemorirati, pregledati i dosljedno posluživati pri svakoj objavi.
Povežite manifest i njegove ikone
Statična datoteka manifesta ili funkcija manifest.ts može opisati naziv aplikacije, boje i ikone za instalaciju. URL-ovi ikona manifesta moraju biti javni i upućivati na datoteke deklariranih dimenzija.
Razdvojite ulogu manifesta od favicona kartice: instalacijska ikona 512×512 ne zamjenjuje automatski icon.svg ili favicon.ico.
Testirajte u produkciji
Pokrenite produkcijsku izgradnju, otvorite po jednu rutu iz svakog zahvaćenog segmenta i pregledajte elemente link. Zatim izravno otvorite URL svake datoteke i potvrdite da ga middleware ne presreće.
Ako koristite basePath ili CDN, testirajte generirane URL-ove u objavljenom okruženju. Lokalno ponašanje ne otkriva uvijek pogrešnu javnu osnovnu putanju ili pravilo prepisivanja URL-a.
Primarni izvori
Česta pitanja
Treba li ručno pisati elemente link?
Ne. Konvencije datoteka ili metadata.icons mogu ih generirati. Odaberite jedan jasan izvor konfiguracije.
Gdje treba smjestiti favicon.ico?
U App Routeru konvencija favicon.ico podržana je u korijenu mape app.
Zamjenjuje li manifest.ts icon.svg?
Ne. Manifest među ostalim podacima opisuje ikone za instalaciju, dok icon.svg izravno pruža ikonu preglednika.