Favicon не отображается в Next.js? Вот решение
В App Router Next.js строит ссылки на иконку из файлов в каталоге app. Ошибитесь в имени файла — и не будет выведено ничего. В Pages Router конвенции нет вообще. Определите, с чем именно вы столкнулись, и решение станет очевидным.
На каком роутере вы работаете?
App Router читает файлы с именами favicon.ico, icon и apple-icon из каталога app, определяет их размер и подставляет теги link на этапе сборки. Если файл назван неправильно или лежит не в той папке, тег не выводится. Ошибки нет — просто пустая вкладка.
В Pages Router такой конвенции нет. Ничего не появится, пока вы не положите файлы в public и не пропишете теги link самостоятельно в кастомном head. Проект, наполовину перенесённый между этими двумя подходами, — классическая причина того, почему favicon работает на одном маршруте и не работает на другом.
Где должен лежать файл
| Файл | Роутер | Что делает Next.js |
|---|---|---|
| app/favicon.ico | App Router | Отдаётся по /favicon.ico, тег подставляется автоматически |
| app/icon.png | App Router | Размер определяется и ссылка добавляется автоматически при сборке |
| public/favicon.ico | Pages Router | Появляется, только если добавить тег link вручную |
Проверьте это за тридцать секунд
- 1
Откройте URL иконки напрямую
Загрузите /favicon.ico (или /icon) в новой вкладке. Ошибка 404 означает, что файла нет там, где его ждёт Next: это проблема сборки, а не кэша.
- 2
Откройте исходный код страницы и найдите rel="icon"
Если ссылки на иконку в head нет, значит файловая конвенция не сработала. Проверьте, что имя файла точно совпадает: favicon.ico, icon.png, apple-icon.png.
- 3
Кэш исключайте в последнюю очередь
Только после того как файл открывается и тег присутствует, стоит делать жёсткое обновление в приватном окне. В девяти случаях из десяти проблема была раньше, чем кэш.
Favicon не отображается в Next.js: частые вопросы
Почему мой favicon в Next.js не отображается?
В App Router — потому что файл назван неправильно или лежит не в каталоге app, поэтому тег link не генерируется. В Pages Router — потому что автоматической конвенции нет, а вы не добавили теги в кастомный head. Откройте /favicon.ico напрямую. Ошибка 404 подтверждает, что дело в файле или его расположении.
Нужен ли favicon.ico, если у меня есть app/icon.png?
Оставьте оба. icon.png покрывает современные браузеры с более высоким качеством; favicon.ico — то, что по-прежнему запрашивают по пути старые браузеры, читалки лент и некоторые сканеры превью ссылок.
Почему favicon показывается на одной странице, но не на другой?
Обычно это проект, смешивающий App Router и Pages Router. Конвенция каталога app покрывает только маршруты, которые он рендерит; маршрутам Pages Router нужны собственные теги link в _document или кастомном head.