Фавикон для сайта в 2026 году — форматы, размеры и правильный HTML
Фавикон — это иконка размером с ноготь, которую видит каждый посетитель сайта: во вкладке браузера, в закладках, в истории и — что важнее всего — в поисковой выдаче Яндекса и Google рядом с вашей ссылкой. Сайт без фавикона в выдаче выглядит как объявление без фотографии. При этом вокруг фавиконов накопилось безумное количество устаревших советов — «сгенерируйте 30 файлов на все случаи». Спойлер: в 2026 году нужно четыре.
Современный минимум: favicon.ico (32×32, для старых браузеров и запросов по умолчанию), favicon.svg (масштабируется куда угодно и поддерживает тёмную тему), apple‑touch‑icon.png (180×180, для iPhone и iPad) и PNG 192×192 для Android. Всё. Остальные 26 файлов из старых гайдов можно не делать.
Зачем фавикон вообще нужен
- Вкладки браузера. Когда открыто двадцать вкладок, пользователь находит вашу по иконке, а не по тексту.
- Поисковая выдача. И Яндекс, и Google показывают фавикон рядом со сниппетом. Нет иконки — на её месте серый глобус, и CTR страдает.
- Закладки и главный экран телефона. Сохранённый на домашний экран сайт получает вашу иконку — или уродливую заглушку.
Минимальный набор файлов
| Файл | Размер | Для кого |
|---|---|---|
| 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 напрямую.
Почему SVG‑фавикон — это удобно
Во‑первых, один файл закрывает все размеры: браузер сам отрендерит его хоть в 16, хоть в 512 пикселей. Во‑вторых, SVG‑фавикон умеет адаптироваться к тёмной теме — прямо внутри файла работает media query:
<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 такой трюк невозможен.
Как сделать фавикон из логотипа
- Возьмите знак, а не полный логотип. Текстовая часть в 16 пикселях нечитаема. Нужна иконка: буква, символ, упрощённый знак. У Сбера во вкладке — галочка‑круг, а не слово «Сбер».
- Упростите. Уберите мелкие детали, тонкие линии, градиенты из трёх цветов. Проверка простая: уменьшите иконку до 16×16 и посмотрите — узнаётся ли.
- Сделайте квадратную композицию. Фавикон — квадрат. Вытянутый логотип в нём превратится в полоску; знак должен занимать почти весь квадрат с небольшими полями.
- Экспортируйте набор. Из SVG‑исходника получите ICO (32×32) и два PNG (180 и 192). Это умеет любой генератор фавиконов, Figma или командная строка.
Не скругляйте углы у apple‑touch‑icon сами — iOS сделает это автоматически. А вот фон ему нужен непрозрачный: прозрачные места iOS зальёт чёрным, и иконка может выглядеть неожиданно мрачно.
Типичные ошибки
- Ставить полноцветный детальный логотип — в 16 пикселях он превращается в шум.
- Генерировать 30 файлов по гайду 2015 года — msapplication‑тайлы, иконки под давно мёртвые устройства. Мусор в корне и в
<head>. - Забывать про
/favicon.icoв корне — часть ботов и сервисов не читает<link>-теги. - Один PNG 16×16 на всё — на ретина‑экранах и в закладках будет мыло, а поисковики любят иконки покрупнее.
Как проверить, что всё работает
- Откройте сайт в режиме инкогнито — кэш фавиконов у браузеров свирепый, обычное обновление страницы иконку не сменит.
- Проверьте
https://ваш-сайт/favicon.icoнапрямую — должен отдаваться файл, а не 404. - Добавьте сайт на домашний экран iPhone — увидите свой apple‑touch‑icon.
- Смена фавикона в выдаче Яндекса и Google происходит не мгновенно: поисковики перекачивают иконки со своим расписанием, это может занять от нескольких дней до пары недель.
Фавикон и поисковики: требования Яндекса и Google
Для выдачи у поисковиков есть свои предпочтения, и они отличаются:
- Google берёт фавикон с корня сайта (одна иконка на весь домен), просит размер кратный 48 пикселям (48, 96, 144) или SVG и может не показывать иконку, если считает её неподходящей — например, с мелким нечитаемым содержимым. Иконка в выдаче обновляется при перекраулинге главной.
- Яндекс поддерживает SVG‑фавиконы и крупные PNG; в выдаче на мобильных иконка стоит рядом с каждым результатом, так что её вклад в CTR у Яндекса даже заметнее. Форсировать обновление можно через перекраул в Вебмастере.
- Обе системы не любят: пустые/белые иконки (сливаются с фоном выдачи), иконки‑заглушки CMS (стандартный фавикон WordPress выдаёт шаблонный сайт) и несоответствие тематике.
Практический вывод: фавикон — это фактор кликабельности в выдаче, то есть напрямую SEO‑инструмент. Сайт с узнаваемой иконкой собирает больше кликов при той же позиции.
PWA и manifest.json: иконки для «установки» сайта
Если сайт можно добавить на главный экран как приложение (PWA), браузер ищет иконки в манифесте:
{
"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.
Тонкости, о которых спрашивают чаще всего
Можно ли анимированный фавикон? Технически GIF‑фавиконы поддерживает часть браузеров, но не делайте этого: мигающая вкладка раздражает, а поисковики анимацию игнорируют. Единственная легитимная «анимация» — смена фавикона из JS для индикации (непрочитанные уведомления, статус звонка), как делают почтовые веб‑клиенты.
Почему фавикон не обновляется у посетителей? Кэш фавиконов — самый живучий в браузере: он переживает обычную очистку кэша. Смените имя файла (favicon‑v2.svg) и обновите пути в <link> — это гарантированно собьёт кэш всем.
Нужен ли отдельный фавикон для поддоменов? Да, каждый поддомен (blog.site.ru, app.site.ru) — отдельный сайт для браузера и поисковика: положите иконки и на них, иначе получите глобусы.
Что делать, если знак бренда не читается в 16 пикселях? Сделайте для фавикона специальную упрощённую версию: одну букву, фрагмент знака, просто фирменный цвет с простой формой. Это нормальная практика — фавикон многих брендов отличается от полного логотипа.
Коротко
Четыре файла — ico, svg, два png — плюс три строчки в <head>, и ваш сайт выглядит по‑взрослому во вкладках, закладках и поисковой выдаче. Начинается всё с векторного знака: если у вас есть SVG логотипа, фавикон из него делается за десять минут.
Векторные знаки почти любого известного бренда — в нашем каталоге логотипов: скачивайте SVG, упрощайте до знака и собирайте фавикон. А если нужен просто символ или эмодзи для пет‑проекта — загляните в каталог эмодзи.