Favicon не отображается в React? Вот решение
React рендерит в DOM-узел и никогда не трогает head, поэтому favicon живёт в статическом HTML-файле. Пустая вкладка означает, что тег link в этом файле неверен, или иконку импортировали из src, и она больше не находится по фиксированному пути.
head — это статический файл, а не компонент
Браузер запрашивает favicon, пока разбирает head, задолго до того как React смонтируется. Поэтому ссылка на иконку должна быть в HTML-каркасе: index.html в корне проекта под Vite или public/index.html под Create React App.
Ломается это двумя способами. В Create React App href без плейсхолдера %PUBLIC_URL% работает локально, а потом отдаёт 404 не с корня домена. В любом React-проекте импорт иконки из src передаёт её бандлеру, который переименовывает её с хэшем содержимого, и по /favicon.ico больше ничего не отвечает.
Найдите причину
- 1
Откройте /favicon.ico напрямую
Ошибка 404 означает, что файл не отдаётся по этому пути: проблема сборки или пути. Если он загружается, файл в порядке, и дело в теге link или в кэше.
- 2
Прочитайте собранный index.html
Смотрите в выводе сборки, а не в исходниках. Убедитесь, что href иконки указывает на реальный путь, а для CRA — что %PUBLIC_URL% был подставлен, а не остался буквально.
- 3
Перестаньте импортировать иконку из src
Файлы в public/ сохраняют имена и отвечают по фиксированным путям; импорты из src/ получают хэш. Favicon должен лежать в public/.
Favicon не отображается в React: частые вопросы
Почему мой favicon в React не отображается?
Почти всегда тег link в index.html указывает туда, где файла нет, или иконку импортировали из src и она получила хэшированное имя. Откройте /favicon.ico напрямую, чтобы понять, отдаётся ли файл вообще по этому пути.
Почему favicon стал отдавать 404 после деплоя на подпуть?
href разрешился относительно корня домена, а не вашего подкаталога. В Vite задайте base в vite.config.js; в Create React App задайте поле homepage и используйте %PUBLIC_URL% в шаблоне, затем проверьте собранный index.html.
Нужно ли импортировать favicon в коде React?
Нет. Файлы в public/ копируются в вывод сборки как есть и не входят в граф модулей. Импорт создаёт вторую, хэшированную копию и ломает фиксированный путь /favicon.ico.