Фавикон для Nuxt
Nuxt 3 обслуживает статические файлы из /public в корне сайта. Настройте теги <link> в nuxt.config.ts в app.head.link для централизованной, удобной для SSR настройки значков.
Поместите favicon.ico в public/favicon.ico — Nuxt обслуживает его автоматически без дополнительной настройки.
В nuxt.config.ts добавьте в app.head.link записи значков: { rel: 'icon', type: 'image/png', size: '32x32', href: '/favicon-32x32.png' }.
Используйте useHead() в макете только тогда, когда значки различаются в зависимости от маршрута — большинство сайтов устанавливают глобальные значки один раз в nuxt.config.
Для модулей @nuxtjs/seo или конфигурации сайта следуйте их полю favicon, если оно присутствует — оно содержит те же теги ссылок.
Nuxt Изображение не обрабатывает значки; загрузите окончательные размеры в public/.
При использовании предустановленного статического хостинга Nitro убедитесь, что пути к значкам существуют в .output/public после создания nuxi.
Как это работает
- 1
Добавить файлы в общий доступ/
Размеры favicon.ico, PNG, опционально SVG.
- 2
Настройте app.head.link
Централизуйте ссылки на значки в nuxt.config.ts.
- 3
Создайте и проверьте HTML
Просмотрите исходный код на развернутой странице, чтобы найти правильные теги.
Попробовать сейчас
Создайте свой пакет значков Nuxt.
Генератор пакета faviconЧастые вопросы
Nuxt по-прежнему отображает значок по умолчанию. Почему?+
Очистите кеш .nuxt, замените public/favicon.ico и перезапустите сервер разработки.
Как добавить значок Apple Touch в Nuxt 3?+
Добавьте { rel: 'apple-touch-icon', размеры: '180x180', href: '/apple-touch-icon.png' } в app.head.link.
Дублирует ли SSR теги значков?+
Избегайте определения одной и той же ссылки как в nuxt.config, так и в вызове useHead на уровне страницы.