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 или page. Укажите icon, apple и при необходимости shortcut с согласованными URL.
Метаданные дочернего сегмента могут заменять составные поля, унаследованные от родительского. Проверяйте итоговый head на нескольких маршрутах, а не предполагайте, что все родительские записи объединились.
Для значка, создаваемого по запросу, Next.js также поддерживает icon.tsx и icon.js. Функция возвращает изображение с явно заданными размером и типом содержимого. Используйте этот подход для действительно динамических композиций: статический файл проще кэшировать, проверять и одинаково отдавать при разных развёртываниях.
Подключите манифест и его значки
Статический файл манифеста или функция manifest.ts может описывать название приложения, цвета и значки для установки. URL значков манифеста должны быть общедоступными и указывать на файлы с объявленными размерами.
Не смешивайте роль манифеста и фавикона вкладки: значок установки 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 непосредственно задаёт значок браузера.