Нужен ли favicon.ico в 2025?

Практический разбор поддержки favicon.ico в 2025. Современным браузерам файл не обязателен, но его всё равно стоит оставить: меньше шума в логах и лучше совместимость со старыми инструментами.

Короткий ответ

Формально современные браузеры (Chrome, Edge, Safari, Firefox) больше не требуют файл .ico. На практике его всё же настоятельно рекомендуется оставить.

Без favicon.ico логи сервера быстро заполняются ошибками 404. Многие старые боты и RSS-читалки не смотрят HTML-заголовок и сразу запрашивают /favicon.ico из корня.

Рекомендуемая схема на 2025

Хватит 3–4 файлов на все сценарии. Десятки устаревших размеров генерировать не нужно:

1. favicon.ico (32×32) — совместимость и запасной вариант

  • Обязательно положите файл в корень сайта (/favicon.ico)
  • Главная задача — убрать ошибки в логах и закрыть старые инструменты

2. icon.svg — современный стандарт (основной)

  • Современные браузеры предпочитают его
  • Масштабируется без потери качества

3. apple-touch-icon.png (180×180) — устройства iOS

  • Используется, когда на iPhone/iPad выбирают "Add to Home Screen"
  • Несколько размеров не нужны: 180×180 покрывает все устройства iOS

4. manifest.webmanifest (по желанию)

  • В основном для Android и установки PWA
  • Задаёт PNG-иконки 192×192 и 512×512

Код (HTML / Nuxt Head)

Самый короткий и актуальный вариант:

<head>
  <!-- 1. Modern SVG (highest priority) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- 2. Apple iOS icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 3. Traditional .ico (fallback) -->
  <!-- Note: Adding sizes="any" tells Chrome this is a bitmap, -->
  <!-- so Chrome will prefer SVG over ICO -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  
  <!-- 4. Android/PWA configuration -->
  <link rel="manifest" href="/manifest.webmanifest">
</head>

Для проектов на Nuxt.js

В nuxt.config.ts или в компоненте страницы:

useHead({
  link: [
    { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
    { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
    { rel: 'manifest', href: '/manifest.webmanifest' },
  ],
})

Зачем оставлять favicon.ico?

Чистота логов

Без favicon.ico логи заполняются 404. Каждый бот, краулер или RSS-читалка, который запрашивает /favicon.ico (это происходит само), оставляет ошибку. Шум мешает искать настоящие проблемы.

Старые инструменты

Многие старые утилиты, RSS-читалки, менеджеры закладок и расширения браузера всё ещё ждут favicon.ico в корне. Современным браузерам файл не нужен, но эти инструменты часто не читают HTML-заголовки и ходят сразу в корень.

Почти бесплатно, пользы много

Файл favicon.ico 32×32 почти ничего не весит (обычно меньше 2 КБ) и не требует ухода. Чистые логи и широкая совместимость стоят гораздо больше.

Современный подход: сначала SVG

favicon.ico стоит оставить ради совместимости, но основным значком лучше сделать SVG:

  • Не зависит от разрешения: Остаётся чётким от 16×16 до 512×512
  • Меньше весит: Часто легче сопоставимого PNG
  • Запас на будущее: Хорошо выглядит на экранах высокой плотности и новых устройствах
  • Один файл: Один SVG закрывает несколько размеров PNG

Современные браузеры (Chrome, Firefox, Safari, Edge) умеют SVG-favicon. Атрибут sizes="any" на ссылке ICO помогает браузеру предпочесть SVG, если он есть.

Главное

  • Не удаляйте .ico: Браузер может им не пользоваться, но файл в корне бережёт логи и старые инструменты.
  • SVG — основной формат: Один SVG закрывает большую часть вопросов с разрешением.
  • Минимум файлов: Достаточно 3–4 файлов (favicon.ico, icon.svg, apple-touch-icon.png и при необходимости manifest.webmanifest), чтобы покрыть все сценарии.
  • Порядок ссылок важен: Сначала SVG, затем ICO с sizes="any", чтобы современные браузеры выбрали лучший формат.

Заключение

В 2025 году favicon.ico формально не нужен современным браузерам, но оставлять его — хорошая практика. Меньше шума в логах, лучше совместимость со старыми инструментами, почти нулевая цена. Вместе с SVG получается схема и для сегодняшнего веба, и на вырост.

Суть — простота: один SVG как основной значок, небольшой ICO ради совместимости, Apple touch icon для iOS и при желании манифест для PWA. Такой минимум закрывает все случаи без десятка файлов разных размеров.