Фавикон для Vue.js
Приложения Vue отправляют статические ресурсы из /public (Vite) или /public (Vue CLI). Поместите туда favicon.ico и укажите его в index.html — сервер разработки и производственная сборка обслуживают его в корне сайта.
Вите: поместите favicon.ico в /public/favicon.ico. Добавьте <link rel="icon" href="/favicon.ico"> в index.html внутри <head>.
Для хешированных сборок корневой уровень /favicon.ico не получает хеш контента — идеально подходит для стабильных запросов браузера.
Vue CLI использует то же соглашение public/. Замените файл public/favicon.ico по умолчанию на файл с разными размерами.
Добавьте PNG и ссылки в виде значков яблока для мобильных устройств. Сохраняйте пути абсолютными (/apple-touch-icon.png), чтобы режим истории vue-router не нарушал вложенные маршруты.
При развертывании в Netlify или Vercel убедитесь, что файлы значков включены в выходные данные dist — они копируются из общедоступного/автоматически.
Для vite-plugin-pwa объявите значки в разделе манифеста vite.config.ts — записи 192×192 и 512×512 PNG.
Как это работает
- 1
Скопировать значки в общий доступ/
favicon.ico, apple-touch-icon.png, необязательно favicon.svg.
- 2
Редактировать index.html
Добавьте теги <link rel="icon"> и apple-touch-icon.
- 3
Сборка и развертывание
Подтвердите, что /favicon.ico возвращает 200 при производстве.
Попробовать сейчас
Создание ресурсов значков Vue
Генератор фавиконовЧастые вопросы
Почему на сервере разработки Vue отображается логотип Vite?+
Замените public/favicon.ico и перезапустите сервер разработки.
Куда идут значки SVG в Vue?+
public/favicon.svg плюс <link rel="icon" type="image/svg+xml" href="/favicon.svg"> в index.html.
Влияет ли vue-router на пути к значкам?+
Только если вы используете относительные hrefs — всегда используйте корневые относительные /пути.