Favicon правильно: все размеры и форматы 2026 года

Содержание

Содержание
Что такое favicon
Зачем так много размеров
Полный набор файлов 2026
Как подготовить иконку
Автоматические генераторы
Подключение в HTML
manifest.json для PWA
Минимальный набор для простого сайта
Как проверить
Частые ошибки
FAQ
Чек-лист favicon
Заключение

Favicon — маленькая иконка во вкладке браузера. Кажется мелочью, но без неё сайт выглядит непрофессионально, а с одной картинкой 16×16 — устарел. В 2026 году правильный favicon — это набор из десятка файлов разного размера для разных устройств: классических вкладок, мобильных закладок, плиток Windows, иконок Apple Touch. В статье — какие размеры нужны, как их подготовить, и как правильно подключить в HTML.

Что такое favicon

Favicon (favorite icon) — иконка сайта, которая отображается:

На вкладке браузера рядом с заголовком;
В закладках;
В истории браузера;
На главном экране мобильного при добавлении сайта как ярлык;
В уведомлениях PWA;
В превью-карточках при шеринге.

Изначально это был один файл favicon.ico 16×16. Сегодня — целый набор файлов для разных платформ.

Зачем так много размеров

Разные платформы и устройства показывают иконку в разных размерах:

Классическая вкладка браузера: 16×16 или 32×32.
Apple Touch Icon (закладка на iOS): 180×180.
Android Chrome: 192×192, 512×512.
Windows плитка: 144×144, 310×310.
Safari pinned tab: SVG (любой размер).
PWA-ярлык: 192×192, 512×512.

Если предоставить только одну картинку, система может растянуть/сжать её — и она будет выглядеть размыто.

Полный набор файлов 2026

favicon.ico — мульти-формат, содержащий 16×16 и 32×32 (для совместимости со старыми браузерами).
favicon-16x16.png — для вкладки.
favicon-32x32.png — для вкладки на дисплеях с высоким DPI.
apple-touch-icon.png — 180×180, для iOS.
android-chrome-192x192.png — для Android.
android-chrome-512x512.png — для PWA.
mstile-150x150.png — для Windows плиток.
safari-pinned-tab.svg — для Safari (монохромный).
site.webmanifest — манифест для Android и PWA.
browserconfig.xml — для Windows.

Все файлы кладутся в корень сайта.

Как подготовить иконку

Исходный файл

Нужна квадратная картинка в высоком разрешении (минимум 512×512, лучше 1024×1024). Желательно в формате PNG с прозрачным фоном или SVG.

Принципы хорошего favicon:

Простой узнаваемый знак — буква, абстракция, логотип;
Контрастные цвета — иконка маленькая, должна быть видна;
Без мелких деталей — на 16×16 они превратятся в кашу;
Желательно работает и на тёмном, и на светлом фоне.

Создание в редакторах

Figma — нарисуйте 512×512, экспортируйте в разных размерах.
Photoshop / GIMP — классика.
Canva — есть шаблоны.
Sketch, Affinity Designer — для дизайнеров.

Автоматические генераторы

Загружаете одну большую картинку — получаете zip-архив со всеми нужными файлами и кодом для HTML.

realfavicongenerator.net — самый популярный, генерирует все форматы и манифесты.
favicon.io — простой, можно сделать favicon из текста или эмодзи.
favicongenerator.com — базовый набор.

Шаги в realfavicongenerator:

Загружаете исходную картинку.
Настраиваете отображение под iOS, Android, Windows, Safari.
Скачиваете архив.
Распаковываете в корень сайта.
Копируете код для HTML.

Подключение в HTML

В секцию <head> на каждой странице:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

manifest.json для PWA

Файл site.webmanifest в корне:

{
  "name": "Yoursite",
  "short_name": "Yoursite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Минимальный набор для простого сайта

Если не хочется заморачиваться со всеми размерами, минимум:

favicon.ico — содержит 16×16 и 32×32.
apple-touch-icon.png — 180×180.

В HTML:

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Этого хватит для 90% пользовательских сценариев. Полный набор нужен для серьёзных коммерческих проектов и PWA.

Как проверить

В браузере

Откройте сайт, посмотрите на вкладку. Если иконка появилась — базово работает. Закройте и переоткройте сайт через инкогнито — браузер сбросит кэш.

На разных устройствах

iOS: Safari → поделиться → На главный экран. Должна появиться правильная иконка.
Android: Chrome → меню → Добавить на главный экран.
Windows: открыть сайт, проверить плитку в браузере Edge.

Онлайн-сервисы

realfavicongenerator.net/favicon_checker — анализирует, какие файлы есть, что не хватает.
favicon-checker.com — простая проверка.

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

Иконка не отображается. Кэш браузера. Очистите или откройте в инкогнито.
Только favicon.ico 16×16. На retina-дисплеях выглядит размыто. Добавьте 32×32 и больше.
Нет apple-touch-icon. На iOS при добавлении сайта на главный экран показывается уродливый screenshot. Добавьте 180×180.
Слишком мелкие детали. На 16×16 не различить. Упрощайте.
Прозрачный фон с тонкими элементами. На разных фонах системы может выглядеть плохо. Тестируйте.
Файлы не в корне. apple-touch-icon ищется только в корне сайта по умолчанию. Если в /images/ — нужен полный путь в link.
Забыли manifest.json. PWA не будет работать корректно на Android.

FAQ

Обязательно ли иметь favicon?

Технически нет. Без него сайт работает. Но пустая вкладка с дефолтной иконкой браузера — некрасиво и непрофессионально. Минимальный favicon — 5 минут работы.

Что такое favicon.ico?

Специальный формат от Microsoft (ICO), может содержать несколько изображений разных размеров в одном файле. Браузер выбирает нужный размер. Современная альтернатива — отдельные PNG для каждого размера.

Какой минимальный размер исходной картинки?

512×512 px достаточно. Лучше 1024×1024 — для будущих больших экранов и качественного скейлинга вниз.

Можно ли сделать favicon из эмодзи?

Да. favicon.io есть генератор favicon из эмодзи. Быстро и весело. Подходит для микро-проектов, не для серьёзного бизнеса.

Как часто нужно обновлять favicon?

Только при ребрендинге. Один раз сделанный набор работает годами. При обновлении — пересоберите все размеры из новой исходной картинки.

Влияет ли favicon на SEO?

Google показывает favicon в мобильной выдаче рядом с результатами. Сайты без favicon показываются с дефолтной иконкой документа — выглядит хуже, кликов меньше.

Что такое theme_color?

Цвет адресной строки браузера в мобильном Chrome. Когда открывается сайт, верхняя панель окрашивается в этот цвет — выглядит «брендово».

Чек-лист favicon

☐ Создана исходная картинка 512×512+ px
☐ Сгенерирован полный набор favicon (через realfavicongenerator)
☐ Файлы загружены в корень сайта
☐ Добавлены link-теги в <head> на всех страницах
☐ Создан site.webmanifest
☐ Указан theme_color
☐ Проверено отображение в Chrome, Firefox, Safari
☐ Проверена иконка на iOS (добавить на главный экран)
☐ Проверена иконка на Android
☐ Прогнано через favicon_checker — без ошибок

Заключение

Современный favicon — это не один файл, а набор для разных платформ. Полная настройка занимает 10-15 минут через автоматический генератор, но улучшает восприятие сайта на всех устройствах. Минимум — favicon.ico + apple-touch-icon, полный набор — для серьёзных проектов и PWA.

Готовые HTML-шаблоны Zettabyte часто уже идут с базовым набором favicon — остаётся заменить тестовые иконки на свои. А для размещения сайта подойдёт любой тариф из подборщика хостингов.