App Router може направити елементе икона из датотека са конвенционалним називима или из објекта metadata. Оба приступа су исправна, али њихово мешање без јасног правила лако ствара супротстављене декларације.
Изаберите конвенције датотека
Ставите favicon.ico у корен app директоријума. Подржане icon датотеке могу бити у сегменту руте, док apple-icon описује икону намењену Apple уређајима.
Next.js открива ове датотеке, одређује корисне атрибуте и додаје одговарајуће link елементе у head. Икона смештена у сегмент важи за руте у том сегменту.
| Датотека | Место | Намена |
|---|---|---|
| favicon.ico | app/ | Резервна икона сајта |
| icon.svg | app сегмент | Икона прегледача |
| apple-icon.png | app сегмент | Apple икона |
| manifest.webmanifest | app сегмент | Манифест за инсталацију |
Користите metadata за изричите путање
Ако су ресурси у public директоријуму или на хосту за слике, наведите metadata.icons у распореду или страници. Задајте icon, apple и, по потреби, shortcut користећи доследне URL адресе.
Метаподаци подређеног сегмента могу заменити сложена поља наслеђена од родитеља. Прегледајте коначни head на више рута уместо да претпоставите да је свака родитељска ставка спојена.
За икону направљену на захтев, Next.js подржава и icon.tsx или icon.js. Функција враћа податке слике са изричитом величином и типом садржаја. Овај приступ користите за заиста динамичке композиције: статичка датотека лакше се кешира, прегледа и доследно служи у различитим издањима.
Повежите манифест и његове иконе
Статичка датотека манифеста или функција manifest.ts може описати назив апликације, боје и инсталационе иконе. Адресе икона манифеста морају бити јавне и водити на датотеке са наведеним димензијама.
Раздвојите улогу манифеста од фавикона картице: инсталациона икона од 512×512 не замењује аутоматски icon.svg или favicon.ico.
Тестирајте у продукцији
Покрените продукциону изградњу, отворите једну руту из сваког погођеног сегмента и прегледајте link елементе. Затим директно отворите URL сваког ресурса и потврдите да га middleware не пресреће.
Ако користите basePath или CDN, тестирајте добијене адресе у објављеном окружењу. Локално понашање не открива увек погрешну јавну основу или правило преписивања.
Примарни извори
Честа питања
Да ли треба ручно писати link елементе?
Не. Конвенције датотека или metadata.icons могу их направити. Изаберите један јасан извор података.
Где треба ставити favicon.ico?
Уз App Router, конвенција favicon.ico подржана је у корену app директоријума.
Да ли manifest.ts замењује icon.svg?
Не. Манифест, између осталог, описује инсталационе иконе, док icon.svg непосредно служи икону прегледача.