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 в layout или страница. Задайте icon, apple и при нужда shortcut със съгласувани URL адреси.
Метаданните на дъщерен сегмент могат да заменят наследени съставни полета. Затова проверете крайния head на няколко маршрута, вместо да приемате, че всеки запис от родителя е обединен.
За икона, генерирана при заявка, Next.js приема и icon.tsx или icon.js. Функцията връща данни за изображение с изрични размер и тип. Използвайте този подход за действително динамични композиции: статичният файл е по-лесен за кеширане и проверка.
Свързване на манифеста и иконите му
Статичен manifest файл или функция manifest.ts може да описва името на приложението, цветовете и иконите за инсталиране. URL адресите на иконите в манифеста трябва да са публични и да сочат към декларираните размери.
Разграничавайте ролята на манифеста от favicon в раздела: икона 512×512 за инсталиране не заменя автоматично icon.svg или favicon.ico.
Тестване в продукционна среда
Изпълнете продукционна компилация, отворете маршрут от всеки засегнат сегмент и проверете елементите link. После проверете директно всеки URL на ресурс и потвърдете, че не е прихванат от middleware.
Ако използвате basePath или CDN, тествайте генерираните URL адреси в публикуваната среда. Локалното поведение невинаги разкрива неправилен публичен основен път или правило за пренаписване.
Първоизточници
Често задавани въпроси
Трябва ли да пиша таговете link ръчно?
Не. Файловите конвенции или metadata.icons могат да ги генерират. Изберете един ясен източник на настройките.
Къде да поставя favicon.ico?
При App Router конвенцията favicon.ico се поддържа в основната директория на папката app.
manifest.ts заменя ли icon.svg?
Не. Манифестът описва, наред с друго, иконите за инсталиране, докато icon.svg предоставя директно иконата на браузъра.