18 июня 2026 8 мин чтения 44

Фавикон для сайта в 2026 году — форматы, размеры и правильный HTML

Откройте выдачу Яндекса или Google по любому запросу и посмотрите на левый край результатов. Рядом с каждой ссылкой стоит крошечная иконка сайта, и там, где её нет, поисковик рисует серый глобус. Пользователь выбирает, на что кликнуть, в том числе по этой картинке, а значит, главная работа фавикона происходит здесь, в самом конкурентном месте интернета. Во вкладке браузера его замечают лишь мельком. Из этого следует и требование к нему (читаемость в 16 пикселях), и ответ на вопрос, сколько файлов нужно готовить. Старые гайды требуют тридцати. Сегодня хватает четырёх, и дальше разберём почему.

Коротко

Современный минимум: favicon.ico (32×32, для старых браузеров и запросов по умолчанию), favicon.svg (масштабируется куда угодно и поддерживает тёмную тему), apple‑touch‑icon.png (180×180, для iPhone и iPad) и PNG 192×192 для Android. Остальные 26 файлов из гайдов десятилетней давности делать незачем.

Где фавикон реально работает

Три сценария показа отличаются по цене ошибки, и начинать стоит с самого дорогого.

Поисковая выдача. И Яндекс, и Google ставят иконку рядом со сниппетом, на мобильных — у каждого результата. Пустое место на её месте означает потерянные клики при той же позиции.

Вкладки браузера. Когда открыто двадцать вкладок, заголовки сжимаются до двух букв, и пользователь находит нужную страницу по иконке.

Закладки и главный экран телефона. Сайт, сохранённый на домашний экран, получает вашу иконку — либо системную заглушку, если её не подготовили.

Все три сценария показывают иконку в размере от 16 до 180 пикселей. Один векторный файл закрывает весь диапазон, и именно поэтому набор из тридцати файлов перестал быть нужен.

Минимальный набор файлов

Файл	Размер	Для кого
favicon.ico	32×32	старые браузеры, дефолтный запрос `/favicon.ico`
favicon.svg	вектор	современные браузеры, тёмная тема
apple‑touch‑icon.png	180×180	iPhone/iPad, «На экран Домой»
icon‑192.png	192×192	Android, PWA‑манифест

Подключаются они тремя строками:

код

<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">

Файл favicon.ico при этом кладите в корень сайта, даже когда он подключён через <link>: браузеры, поисковые боты и RSS‑читалки до сих пор ходят по адресу /favicon.ico напрямую, минуя разметку.

Сам ICO держится в наборе по историческим причинам: формат умеет хранить несколько размеров внутри одного файла, и когда‑то только его читал Internet Explorer. Складывать туда весь диапазон от 16 до 256 пикселей сегодня незачем: современный браузер возьмёт SVG, а одна картинка 32×32 остаётся страховкой для тех, кто разметку не читает. Генераторы фавиконов по инерции предлагают многоразмерный ICO, и отказ от него ничего не ломает.

Что умеет SVG‑фавикон

Вектор попал в этот набор за две способности, которых у растра нет.

Первая — один файл на все размеры: браузер отрендерит его хоть в 16, хоть в 512 пикселей, и отдельные копии под каждый размер не понадобятся. Вторая — реакция на тёмную тему, потому что медиазапрос работает прямо внутри файла:

код

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

Чёрный знак во вкладке светлой темы, белый — в тёмной, один файл на оба случая. С PNG такой трюк невозможен, поэтому растровые копии остаются только там, где вектор пока не читают: старые браузеры, iOS и Android.

Как сделать фавикон из логотипа

Файлы генерируются автоматически, а вот исходник для них придётся подготовить руками, и все четыре шага подчинены тому самому размеру в 16 пикселей:

Возьмите знак, оставив полный логотип в стороне. Текстовая часть в 16 пикселях превращается в серую полоску. В фавикон идёт иконка: буква, символ, упрощённый знак. У Сбера во вкладке стоит галочка в круге, а слово «Сбер» там не поместилось бы.
Упростите. Уберите мелкие детали, тонкие линии и градиенты из трёх цветов. Проверка занимает секунду: уменьшите иконку до 16×16 и посмотрите, узнаётся ли она.
Соберите квадратную композицию. Фавикон квадратный, и вытянутый логотип в нём сожмётся в полоску. Знак должен занимать почти весь квадрат с небольшими полями.
Экспортируйте набор. Из SVG‑исходника получите ICO (32×32) и два PNG (180 и 192). Это умеет любой генератор фавиконов, Figma или командная строка.

Про скруглённые углы

Углы у apple‑touch‑icon скругляет iOS, поэтому делать это самому не нужно. А вот фон ему нужен непрозрачный: прозрачные места iOS заливает чёрным, и иконка выглядит неожиданно мрачно.

Чего поисковики не прощают

Раз главная работа иконки происходит в выдаче, у Яндекса и Google есть отдельные требования к ней, и они различаются:

Google берёт одну иконку на весь домен, просит размер кратный 48 пикселям (48, 96, 144) или SVG и может скрыть иконку, посчитав её неподходящей — например, с мелким нечитаемым содержимым. В выдаче она обновляется при перекраулинге главной страницы.
Яндекс поддерживает SVG и крупные PNG. На мобильных иконка стоит у каждого результата, поэтому её вклад в кликабельность здесь заметнее. Обновление можно ускорить перекраулом в Вебмастере.
Обе системы отсеивают пустые и белые иконки (сливаются с фоном выдачи), стандартные заглушки CMS (шаблонный фавикон WordPress сразу выдаёт нетронутый сайт) и картинки, не связанные с тематикой.

Сроки обновления закладывайте заранее. Google перерисовывает иконку после перекраулинга главной страницы, на небольшом сайте это занимает от нескольких дней до пары недель; Яндекс идёт по своему расписанию, и ускорить его можно только переобходом в Вебмастере. Поэтому иконку меняют вместе с релизом сайта, чтобы к моменту роста трафика в выдаче уже стояла новая.

Отсюда практический вывод: фавикон входит в набор SEO‑инструментов наравне с заголовком и описанием сниппета — сайт с узнаваемой иконкой собирает больше кликов на той же позиции.

Типичные ошибки

Так делать не надо

Полноцветный детальный логотип — в 16 пикселях он превращается в шум.
Тридцать файлов по гайду 2015 года — msapplication‑тайлы и иконки под давно мёртвые устройства засоряют корень сайта и <head>.
Отсутствие /favicon.ico в корне — часть ботов и сервисов не читает <link>-теги.
Один PNG 16×16 на все случаи — на ретина‑экранах и в закладках получится мыло, а поисковики предпочитают иконки покрупнее.

Иконки для PWA: manifest.json

Если сайт устанавливается на главный экран как приложение, браузер ищет иконки в манифесте, минуя <link>-теги:

код

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Ключевой пункт здесь — maskable‑иконка: Android обрезает её под форму лончера (круг, скруглённый квадрат), поэтому знак должен сидеть в центральной безопасной зоне (около 80% диаметра), а фон — заливать весь холст. Логика совпадает с адаптивными иконками нативных приложений, которые разбирали в статье про иконки приложений. Проверить свою maskable‑иконку можно в онлайн‑инструменте maskable.app.

Как убедиться, что всё работает

Откройте сайт в режиме инкогнито: кэш фавиконов у браузеров живучий, и обычное обновление страницы иконку не сменит.
Запросите https://ваш-сайт/favicon.ico напрямую — по адресу должен отдаваться файл, а 404 означает, что его забыли положить в корень.
Переключите систему в тёмное оформление и посмотрите на вкладку: чёрный знак без медиазапроса сливается с тёмной панелью браузера, а на светлом фоне эта ошибка не видна вовсе.
Добавьте сайт на домашний экран iPhone и посмотрите на apple‑touch‑icon в деле.
Подождите с проверкой выдачи: поисковики перекачивают иконки по своему расписанию, от нескольких дней до пары недель.

Частые вопросы

Можно ли сделать анимированный фавикон? GIF‑фавиконы поддерживает часть браузеров, но мигающая вкладка раздражает, а поисковики анимацию игнорируют. Легитимный случай один — смена фавикона из JS для индикации статуса: непрочитанные уведомления, идущий звонок. Так делают почтовые веб‑клиенты.

Почему фавикон не обновляется у посетителей? Кэш фавиконов переживает обычную очистку кэша браузера. Смените имя файла (favicon-v2.svg) и обновите пути в <link> — это собьёт кэш всем сразу.

Нужен ли отдельный фавикон для поддоменов? Да: blog.site.ru и app.site.ru для браузера и поисковика — разные сайты. Без своих иконок они получат глобусы.

Обязательно ли делать SVG‑фавикон? Сайт работает и без него: ICO с парой PNG закрывают все браузеры. SVG экономит файлы и даёт реакцию на тёмную тему, поэтому его добавляют, когда векторный знак уже есть. Логотип, существующий только в растре, переводить в вектор ради фавикона незачем: 32×32 и 180×180 сделают своё дело.

Что делать, если знак бренда не читается в 16 пикселях? Сделайте для фавикона отдельную упрощённую версию: одну букву, фрагмент знака или простую форму в фирменном цвете. Так поступают многие бренды, и их фавикон отличается от полного логотипа.

Что в итоге

Фавикон живёт в выдаче, где рядом стоят конкуренты, поэтому единственное настоящее требование к нему — узнаваемость в 16 пикселях; всё остальное отсюда и следует. Из требования вырастает подготовка исходника (знак крупно, без надписи и мелких деталей), а из возможностей SVG — короткий список файлов: ico, svg и два png плюс три строки в <head>.

Начинается всё с векторного знака: если SVG логотипа уже есть, фавикон собирается из него за десять минут. Векторы почти любого известного бренда лежат в нашем каталоге логотипов — скачивайте SVG, упрощайте до знака и собирайте набор. А для пет‑проекта, которому хватит символа, загляните в каталог эмодзи.