Nuxt: настройка favicon для Яндекса и Google

Favicon в Nuxt-проекте может корректно отображаться в браузерах и Google, но при этом полностью отсутствовать в поисковой выдаче Яндекса. Причина — неочевидное поведение серверного движка Nitro, который подменяет favicon.ico прозрачным пикселем.

Nitro: прозрачный пиксель вместо favicon

Суть проблемы

Nitro (серверный движок Nuxt) перехватывает запросы к /favicon.ico и отдаёт прозрачный 1×1 GIF-пиксель с HTTP 200, если файл favicon.ico физически отсутствует в директории public/.

Тело ответа — base64-строка:

R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Это минимальный прозрачный GIF размером 43 байта, который Nitro использует как заглушку.

А что там у Яндекса?

  1. Яндекс-бот запрашивает /favicon.ico (стандартное поведение)
  2. Nitro отвечает HTTP 200 с прозрачным пикселем
  3. Яндекс получает «валидный» ответ, но иконка пустая — бот считает, что favicon не найден
  4. <link rel="icon"> теги из HTML с путями к SVG или PNG Яндекс в этой ситуации не использует — приоритет у /favicon.ico

Google и браузеры ведут себя иначе: корректно парсят <link rel="icon"> из HTML и используют SVG/PNG.

Как обнаружить

curl -sI https://your-site.com/favicon.ico

Если Content-Length равен 43 байтам — это заглушка Nitro.

Кеш Яндекса можно проверить через https://favicon.yandex.net/favicon/your-site.com.

Симптомы в Яндекс Вебмастере

  • «Файл favicon не найден» (рекомендация)
  • В поисковой выдаче рядом с сайтом — серая иконка глобуса вместо favicon
  • При этом Google и все браузеры отображают favicon корректно

Решение

Этап 1: добавить favicon.ico

Главная задача — перекрыть дефолтное поведение Nitro реальным файлом.

Шаг 1: сгенерировать favicon.ico из SVG

magick -background none public/favicon.svg -define icon:auto-resize=48,32,16 public/favicon.ico

Команда создаёт ICO-контейнер с тремя размерами иконки внутри. Требуется ImageMagick.

Шаг 2: поместить favicon.ico в public/

Когда файл физически присутствует — Nitro отдаёт его вместо заглушки.

Шаг 3: добавить <link> тег в nuxt.config.ts

app: {
  head: {
    link: [
      { href: '/favicon.ico', rel: 'icon', sizes: '48x48', type: 'image/x-icon' }
    ]
  }
}

По итогу:

  • Ошибка «Файл favicon не найден» в Яндекс Вебмастере исчезает
  • Яндекс подхватывает ICO
  • Может появиться новая рекомендация: «Добавьте файл favicon в формате SVG или размером 120 × 120 пикселей»

Этап 2: приоритизировать SVG для Яндекса

ICO работает, но Яндекс предпочитает SVG или крупный растр (120×120) для чёткого отображения в сервисах Яндекса. Если в проекте уже есть SVG favicon — нужно правильно его подключить.

Шаг 1: убрать фиксированные размеры из SVG

До:

<svg width="32" height="32" viewBox="8 8 72 72" xmlns="http://www.w3.org/2000/svg">

После:

<svg viewBox="8 8 72 72" xmlns="http://www.w3.org/2000/svg">

Без width/height SVG масштабируется до любого размера. Яндекс может отрендерить его в 120×120 или любом другом нужном разрешении.

Шаг 2: поставить SVG первым в <link> тегах

// nuxt.config.ts
app: {
  head: {
    link: [
      { href: '/favicon.svg', rel: 'icon', type: 'image/svg+xml' },
      { href: '/favicon.ico', rel: 'icon', sizes: '48x48', type: 'image/x-icon' }
    ]
  }
}

Порядок важен: SVG идёт первым — Яндекс приоритизирует его. ICO остаётся как фоллбэк для старых браузеров и как защита от поведения Nitro.

PNG-вариант избыточен: SVG покрывает современные браузеры, а ICO — legacy.

Итоговая конфигурация

Файлы в public/:

public/
├── favicon.svg    # Основной, без width/height, только viewBox
└── favicon.ico    # Фоллбэк, сгенерирован из SVG (48, 32, 16px)

Конфигурация:

// nuxt.config.ts
app: {
  head: {
    link: [
      { href: '/favicon.svg', rel: 'icon', type: 'image/svg+xml' },
      { href: '/favicon.ico', rel: 'icon', sizes: '48x48', type: 'image/x-icon' }
    ]
  }
}

Верификация

После деплоя:

  1. Проверить, что Nitro отдаёт реальный файл:
curl -sI https://your-site.com/favicon.ico

Content-Type должен быть image/vnd.microsoft.icon или image/x-icon, размер — больше 43 байт.

  1. Запросить переобход главной страницы в Яндекс Вебмастере
  2. Через ~3 дня проверить кеш Яндекса через https://favicon.yandex.net/favicon/your-site.com

Различия поведения поисковых систем

АспектЯндексGoogle
Приоритет /favicon.icoВысокий — проверяет первымНизкий — предпочитает <link> из HTML
Реакция на заглушку NitroСчитает, что favicon нетИгнорирует, берёт из <link>
Предпочитаемый форматSVG или PNG 120×120SVG или PNG 48×48
Атрибуты SVGБез width/height, только viewBoxЛюбые
Порядок <link> теговИмеет значение — берёт первыйНе принципиален

Ключевые правила

  1. Всегда размещай favicon.ico в public/ — даже если используешь SVG как основной формат. Это защита от заглушки Nitro.
  2. SVG favicon без фиксированных размеров — убери width и height, оставь только viewBox. Это позволяет поисковикам рендерить иконку в любом размере.
  3. SVG первым в <link> тегах — Яндекс берёт первый подходящий. Если ICO стоит первым — SVG будет проигнорирован.
  4. Не полагайся только на <link> теги — Яндекс может проигнорировать их, если /favicon.ico отдаёт HTTP 200 (даже с пустым содержимым).
← Другие статьи