App Router poate produce elementele icon din fișiere convenționale sau din obiectul metadata. Ambele abordări sunt valide, dar amestecarea lor fără o regulă clară poate crea ușor declarații concurente.
Alege convențiile de fișiere
Pune favicon.ico la rădăcina app. Fișierele icon acceptate pot fi plasate într-un segment de rută, iar apple-icon descrie pictograma destinată dispozitivelor Apple.
Next.js detectează aceste fișiere, stabilește atributele utile și adaugă elementele link corespunzătoare în head. O pictogramă plasată într-un segment se aplică rutelor din acel segment.
| Fișier | Locație | Scop |
|---|---|---|
| favicon.ico | app/ | Pictogramă de rezervă a site-ului |
| icon.svg | segment app | Pictogramă de browser |
| apple-icon.png | segment app | Pictogramă Apple |
| manifest.webmanifest | segment app | Manifest pentru instalare |
Folosește metadata pentru căi explicite
Dacă resursele se află în public sau pe o gazdă de imagini, declară metadata.icons într-un layout sau într-o pagină. Specifică icon, apple și, când este necesar, shortcut folosind URL-uri coerente.
Metadatele unui segment copil pot înlocui câmpuri compuse moștenite de la părinte. Inspectează head-ul final pe mai multe rute în loc să presupui că toate intrările părintelui au fost combinate.
Pentru o pictogramă generată la cerere, Next.js acceptă și icon.tsx sau icon.js. Funcția returnează date de imagine cu dimensiune și tip de conținut explicite. Rezervă această abordare compozițiilor cu adevărat dinamice: un fișier static este mai simplu de păstrat în cache, inspectat și servit consecvent între publicări.
Conectează manifestul și pictogramele sale
Un fișier manifest static sau o funcție manifest.ts poate descrie numele aplicației, culorile și pictogramele instalabile. URL-urile pictogramelor din manifest trebuie să fie publice și să indice fișiere cu dimensiunile declarate.
Păstrează separat rolul manifestului și cel al faviconului din filă: o pictogramă de instalare de 512×512 nu înlocuiește automat icon.svg sau favicon.ico.
Testează în producție
Rulează o compilare de producție, deschide câte o rută din fiecare segment afectat și inspectează elementele link. Apoi deschide direct URL-ul fiecărei resurse și confirmă că middleware-ul nu îl interceptează.
Dacă folosești basePath sau un CDN, testează URL-urile produse în mediul publicat. Comportamentul local nu dezvăluie întotdeauna o bază publică incorectă sau o regulă de rescriere greșită.
Surse primare
Întrebări frecvente
Trebuie să scrii manual elementele link?
Nu. Convențiile de fișiere sau metadata.icons le pot genera. Alege o singură sursă clară de configurare.
Unde trebuie pus favicon.ico?
Cu App Router, convenția favicon.ico este acceptată la rădăcina directorului app.
manifest.ts înlocuiește icon.svg?
Nu. Manifestul descrie, printre alte date, pictogramele instalabile, în timp ce icon.svg furnizează direct pictograma browserului.