Размеры favicon: какие файлы нужны и как их подключить

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

Минимальный набор файлов в 2026 году

Этого достаточно для всех современных браузеров и платформ. Десятки файлов mstile-*, apple-touch-icon-57x57 и подобных больше не нужны.

Сгенерировать весь набор из одного изображения можно в генераторе favicon.

HTML-код подключения

В <head> каждой страницы (или как минимум главной):

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Файл веб-манифеста site.webmanifest:

{
  "name": "Мой сайт",
  "short_name": "Сайт",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#2563eb",
  "background_color": "#ffffff",
  "display": "standalone"
}

Атрибут sizes="32x32" у ICO помогает браузерам, которые поддерживают SVG, выбрать векторную иконку.

SVG-фавиконка и тёмная тема

SVG чётко выглядит на любом экране и весит мало. Внутрь можно встроить стили для тёмной темы браузера:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

Safari поддерживает SVG-фавиконки с недавних версий; для старых устройств Apple всё равно используется apple-touch-icon.

Требования Google

Чтобы фавиконка показывалась в поиске Google:

• иконка должна быть квадратной (соотношение 1:1) и иметь размер не меньше 8×8, но Google рекомендует использовать иконку больше 48×48 (например, 96×96 или 144×144);
• файл и главная страница должны быть доступны для Googlebot (не закрыты в robots.txt);
• URL иконки должен быть стабильным — не меняйте его часто;
• иконка должна представлять бренд и не содержать неприемлемого контента;
• подключается тегом <link rel="icon">, rel="shortcut icon", rel="apple-touch-icon" или rel="apple-touch-icon-precomposed" на главной странице.

Требования Яндекса

По справке Яндекс Вебмастера:

• форматы: SVG (рекомендуется), ICO, GIF, JPEG, PNG, BMP; анимация не поддерживается;
• рекомендуемые размеры: 120×120, 32×32 или 16×16 пикселей — 120×120 или SVG выглядят чётче на сервисах Яндекса;
• ссылка размещается в <head> главной страницы, rel="icon" или rel="shortcut icon";
• атрибут type должен соответствовать реальному формату (image/svg+xml, image/png, image/x-icon);
• файл должен отдавать HTTP 200 OK — редирект считается ошибкой;
• файл не должен быть закрыт в robots.txt (в том числе через запрет каталога);
• иконка должна хорошо выглядеть и на светлом, и на тёмном фоне;
• для кириллического домена ссылку указывайте в Punycode: https://xn--...xn--p1ai/favicon.svg.

Проверить, что robots.txt не блокирует иконку, поможет гайд Как настроить robots.txt.

Дизайн маленькой иконки

• Упрощайте. В 16×16 пикселях читается одна буква или простой символ, а не полный логотип с надписью.
• Контраст. Иконка должна различаться и на светлых, и на тёмных вкладках браузера.
• Отступы для maskable-иконок. Android может обрезать иконку в круг или скруглённый квадрат — держите важное в центральных ~80 %.
• Фон для apple-touch-icon. iOS не поддерживает прозрачность так, как ожидают дизайнеры: прозрачные области заливаются чёрным. Используйте сплошной фон.

Подогнать размеры можно в изменении размера изображения, а перевести PNG в нужный формат — в конвертере изображений.

Как проверить, что всё работает

1. Откройте https://ваш-сайт.ru/favicon.ico и favicon.svg в браузере — файлы должны открываться без редиректов.
2. Посмотрите в DevTools на вкладке Network, какие иконки запрашивает браузер и какой ответ сервер возвращает (должен быть 200).
3. Добавьте сайт на экран «Домой» на iPhone и Android и проверьте, как выглядит иконка.
4. В Яндекс Вебмастере и Google Search Console убедитесь, что главная страница проиндексирована, — фавиконка в выдаче появится после повторного обхода.
5. Проверьте вкладку браузера в светлой и тёмной теме.

Где хранить файлы

Проще всего положить все иконки в корень сайта: /favicon.ico, /favicon.svg, /apple-touch-icon.png, /site.webmanifest. Некоторые браузеры и сервисы запрашивают /favicon.ico и /apple-touch-icon.png из корня по умолчанию, даже если в HTML указан другой путь. Если используете CDN или отдельный домен для статики, следите, чтобы файлы не отдавались с редиректом и с неправильным типом содержимого (Content-Type).

Для WordPress, Tilda и других конструкторов иконка задаётся в настройках сайта — система сама сформирует теги. Но после смены иконки всё равно проверьте, какие файлы реально подключены в коде страницы.

Нужен ли favicon.ico с несколькими размерами

Формат ICO может содержать несколько изображений: 16×16, 32×32 и 48×48. Сегодня достаточно 32×32 — браузеры сами уменьшают его для вкладок. Мультиразмерный ICO имеет смысл, если важно максимально чёткое отображение в старых версиях Windows.

Частые ошибки

• Иконка не квадратная — поисковики её игнорируют.
• favicon.ico отдаёт 404 или редирект на главную.
• Указан type="image/png" для ICO-файла.
• Иконка лежит в каталоге, закрытом в robots.txt (например, /assets/).
• Ожидание мгновенного обновления в выдаче — поисковики перекачивают фавиконки с задержкой.
• Браузер показывает старую иконку из кеша — проверяйте в режиме инкогнито.

Чек-лист

• Есть favicon.ico в корне, favicon.svg, apple-touch-icon.png 180×180, иконки 192 и 512.
• Теги подключены в <head> главной страницы.
• Все файлы отдают 200 OK и не закрыты в robots.txt.
• Иконка квадратная, больше 48×48 и читается в 16×16.
• Проверено отображение на светлом и тёмном фоне.