Как сделать favicon для сайта: полный гайд 2026
Favicon — это лицо сайта в браузере: маленькая картинка во вкладке, в закладках, в истории и в выдаче поиска. Сделать её можно за пять минут, но вокруг темы накопилось много мифов и устаревших советов. Разберём по полочкам: какой набор файлов реально нужен в 2026 году, какие теги вставить и как убедиться, что иконка работает на всех устройствах.
Зачем сайту favicon
Когда у человека открыто двадцать вкладок, заголовки сжимаются до пары букв — и единственное, по чему он находит ваш сайт, это иконка во вкладке. Favicon работает как мини-логотип: он делает бренд узнаваемым в закладках, в истории, на экране «частые сайты» и в результатах поиска на мобильных.
Это и про доверие тоже. Сайт без иконки браузер показывает пустым «листочком» — выглядит брошенным и неаккуратным. Аккуратная фавиконка — маленькая деталь, которая создаёт впечатление, что за проектом следят.
Коротко
Favicon — это не один файл, а небольшой набор: favicon.ico для совместимости, пара PNG для современных браузеров и отдельная иконка для iPhone и iPad. Ниже — как собрать всё это правильно.
Какой набор файлов нужен в 2026
Раньше плодили по двадцать иконок «на всякий случай». Сегодня экосистема упростилась, и разумный современный минимум выглядит так:
Главный фундамент — favicon.ico. Это тот самый многоразмерный контейнер: внутри него лежат версии 16×16, 32×32 и 48×48, и браузер сам берёт нужную. Даже если вы не пропишете ни одного тега, браузер запросит этот файл из корня. Поэтому собрать favicon.ico стоит в любом случае — подробно про устройство формата мы рассказали в статье «Что такое ICO».
Делаем favicon: пошагово
Самый надёжный путь — нарисовать один крупный квадратный логотип и из него получить весь набор. Не пытайтесь рисовать сразу в 16 пикселей: начинайте с большого.
Подготовьте исходник
Квадратный PNG с прозрачным фоном, минимум 512×512. Силуэт должен читаться даже мелким.
Соберите favicon.ico
Сконвертируйте PNG в ICO — конвертер упакует 16, 32 и 48 в один файл.
Сделайте PNG-версии
Отдельно экспортируйте 32×32, 180×180 и 512×512 для современных браузеров и iOS.
Положите в корень и пропишите теги
Загрузите файлы и добавьте ссылки в <head> (теги ниже).
Совет дизайнеру
На размере 16×16 у вас всего 256 пикселей. Тонкие линии и текст превратятся в кашу. Оставьте только главный узнаваемый элемент логотипа — букву, символ или силуэт — и сделайте его контрастным.
Какие теги вставить в HTML
Современный и компактный набор тегов для секции <head> выглядит так. Этого достаточно для подавляющего большинства сайтов:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Что здесь к чему. favicon.ico с sizes="any" — универсальная база для старых и новых браузеров. PNG 32×32 — чёткая иконка для вкладки. SVG — необязательная векторная версия, которая может менять цвет под тёмную тему. apple-touch-icon — картинка для домашнего экрана iPhone и iPad (180×180). А манифест нужен, если вы хотите, чтобы сайт можно было «установить» на Android как приложение.
Частые ошибки и как их избежать
Большинство проблем с фавиконками сводится к нескольким типичным граблям:
- Только PNG, без ICO. Многие старые и корпоративные браузеры всё ещё первым делом ищут
/favicon.ico. Без него рискуете показать пустую иконку — держите ICO как фундамент. - Картинка не квадратная. Прямоугольный логотип браузер сожмёт и исказит. Готовьте строго квадрат, лишнее — в прозрачные поля.
- Мелкие детали в исходнике. То, что красиво в 512 px, в 16 px превращается в пятно. Упрощайте.
- Забыли apple-touch-icon. Без него iPhone при добавлении на экран сделает уродливый скриншот страницы вместо логотипа.
- Файл не в корне. Если
favicon.icoлежит в подпапке и не указан тегом — браузер его не найдёт.
Главная боль: кэш
Фавиконки кэшируются особенно цепко. Если после замены вы видите старую иконку — это почти всегда кэш, а не ошибка. Сделайте жёсткое обновление, проверьте в инкогнито и при необходимости добавьте версию к ссылке: /favicon.ico?v=2.
Как проверить, что всё работает
Не верьте на слово одной вкладке. Минимальная проверка:
- Откройте
site.ru/favicon.icoнапрямую — файл должен скачаться или показаться. - Посмотрите вкладку в обычном окне и в инкогнито (чистый кэш).
- Добавьте сайт на домашний экран iPhone и Android — проверьте, что появился логотип, а не скриншот.
- Загляните в закладки и историю — там используется размер 32×32.
Соберите favicon.ico за пару секунд
Загрузите квадратный PNG-логотип — конвертер FormatZ упакует размеры 16, 32 и 48 в один готовый favicon.ico. Прямо в браузере, бесплатно и без регистрации.
Нужно посмотреть, что лежит в чужом ICO, или вытащить из него картинку? Поможет обратный конвертер — ICO в PNG. А выбрать между ICO, PNG и SVG поможет наше сравнение форматов фавиконок.
