Favicon не отображается во Vue? Вот решение
Одностраничный компонент Vue не может отрендерить тег link в head, поэтому favicon объявляется в index.html: в корне проекта под Vite, внутри public/ под Vue CLI. Пустая вкладка означает, что тег в этом файле неверен.
Почему это не компонент
Браузер запрашивает favicon во время разбора head, до того как Vue что-либо смонтирует. Всё, что вы добавляете изнутри приложения, приходит слишком поздно — поэтому иконка должна быть в статическом HTML.
Где лежит этот HTML, зависит от каркаса. create-vue (Vite) держит index.html в корне проекта и копирует public/ в вывод без изменений. Vue CLI держит шаблон в public/index.html и прогоняет его через EJS, поэтому URL нужен плейсхолдер.
Найдите поломку
- 1
Откройте /favicon.ico напрямую
Ошибка 404 означает, что файл не отдаётся по этому пути. Если он загружается, файл в порядке, и дело в теге link или кэше.
- 2
Определите, на каком вы каркасе
index.html в корне означает Vite: используйте /favicon.ico. Шаблон public/index.html означает Vue CLI: используйте префикс <%= BASE_URL %>.
- 3
Не импортируйте иконку из src
Импортированное изображение бандлится и хэшируется, поэтому /favicon.ico перестаёт резолвиться. Держите иконки в public/ с сохранением имён.
Favicon не отображается во Vue: частые вопросы
Почему мой favicon во Vue не отображается?
Тег link в index.html указывает туда, где файла нет, или (в Vue CLI) отсутствует плейсхолдер BASE_URL, из-за чего путь ломается не с корня домена. Откройте /favicon.ico напрямую, чтобы понять, отдаётся ли файл вообще.
Можно ли задать favicon из компонента Vue?
Вы можете подменить его во время выполнения через useHead, и браузер подхватит изменение после загрузки. Но первый запрос использует то, что объявлено в index.html, поэтому держите там реальное значение по умолчанию.
Почему favicon пропал после того, как я его импортировал?
Импорт изображения из src передаёт его бандлеру, который выводит хэшированное имя файла. После этого по /favicon.ico ничего не достижимо. Положите файл в public/.