Фавикон для Nuxt
Nuxt обслуживает статические файлы из /public в корне вашего сайта, поэтому /public/favicon.ico автоматически становится /favicon.ico. Для значков нескольких размеров или SVG добавьте теги ссылок через nuxt.config.ts или useHead() в app.vue.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Создайте свой пакет значков с помощью Favicon Generator — экспортируйте favicon.ico, favicon.svg и apple-touch-icon.png из источника 512×512. Поместите их в папку /public вашего проекта Nuxt.
Nuxt 3 обслуживает все, что находится в /public, в корне домена без дополнительной настройки. Браузеры по умолчанию запрашивают /favicon.ico, поэтому размещение файла там охватывает наиболее распространенный случай.
Для явного контроля над каждым вариантом значка добавьте теги ссылок в nuxt.config.ts в app.head.link — или вызовите useHead({ link: [...] }) в app.vue. Оба подхода вставляют теги в <head> каждой страницы.
После развертывания откройте рабочий URL-адрес в личном окне и запустите Favicon Checker, чтобы подтвердить /favicon.ico, и ваши пути <link rel="icon"> возвращают 200. Кэшированные значки разработки являются распространенной причиной того, что значок Nuxt не отображается после развертывания.
Если значок вкладки работает, но Google Search по-прежнему показывает пустой значок, убедитесь, что на вашей действующей домашней странице имеется квадратный значок размером не менее 48×48. Правила сканирования и размера см. в нашем руководстве по требованиям к значкам Google.
Nuxt не создает автоматически файлы .ico разного размера — их необходимо предоставить вам. Используйте резервные варианты PNG, связанные с app.head, для приглашений на установку PWA и вкладок с высоким разрешением.
Как это работает
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
Добавить в /public
Скопируйте favicon.ico (и необязательный favicon.svg, apple-touch-icon.png) в папку Nuxt /public.
- 3
Настроить и проверить
При необходимости добавьте записи app.head.link в nuxt.config.ts, разверните, а затем запустите Favicon Checker на своем активном URL-адресе.
Попробовать сейчас
Generate a Nuxt-ready favicon
Генератор фавиконовЧастые вопросы
Как добавить значок в Nuxt 3?+
Поместите favicon.ico в /public, затем при необходимости добавьте теги <link rel="icon"> в nuxt.config.ts в разделе app.head.link или через useHead() в app.vue.
Куда помещается значок в проекте Nuxt?+
Каталог /public. Файлы там обслуживаются из корня вашего домена — /public/favicon.ico доступен по адресу /favicon.ico.
Почему мой значок Nuxt не отображается?+
Распространенные причины: файл отсутствует в /public, неверный путь в app.head, кеш браузера от разработчика или проверка локального хоста вместо развернутого URL-адреса. Проверьте в окне инкогнито.
Должен ли я использовать nuxt.config.ts или useHead() для значков?+
Либо работает. nuxt.config.ts лучше всего подходит для статических значков всего сайта; useHead() в app.vue, если значки зависят от состояния выполнения или логики маршрута.
Могу ли я использовать значок SVG в Nuxt?+
Да — поместите favicon.svg в /public и добавьте { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } в app.head.link.