Руководство по генерации ICO/Favicon: иконки сайтов и иконки PWA

Зачем вам нужен Favicon?

Favicon — это маленькая иконка, отображаемая во вкладках браузера, панелях закладок и на домашних экранах телефонов. Профессиональный сайт обязан его иметь — иначе:

Вкладка браузера показывает пустую иконку по умолчанию, снижая узнаваемость бренда
Пользователи не могут быстро найти ваш сайт в закладках
Установкам PWA не хватает иконки приложения

Спецификации размеров Favicon

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

Размер	Назначение	Формат
16×16	Вкладка браузера (минимальный)	ICO/PNG
32×32	Вкладка браузера (стандартный)	ICO/PNG
48×48	Панель задач Windows	ICO
180×180	Apple Touch Icon (iOS)	PNG
192×192	Android Chrome	PNG
512×512	Иконка запуска PWA	PNG

О формате ICO

ICO — это формат-контейнер — один файл ICO может содержать несколько размеров иконок. Браузер автоматически выбирает наиболее подходящий размер. Поэтому файл ICO весит всего несколько десятков КБ, но работает во всех сценариях.

Использование инструмента генерации ICO

Шаг 1: Подготовить исходное изображение

Выберите высокоразрешённое квадратное изображение как источник. Рекомендации:

Минимум 512×512 (предпочтительно 1024×1024)
Простая графика, остающаяся узнаваемой в маленьком размере
Избегать мелкого текста — нечитаемого при 16×16

Шаг 2: Загрузить и сгенерировать

Откройте Генератор ICO
Загрузите исходное изображение (поддерживаются PNG, JPG, SVG)
Выберите нужные размеры (по умолчанию: все — 16, 32, 48, 180, 192, 512)
Нажмите «Сгенерировать»

Шаг 3: Скачать файлы

Инструмент создаёт два результата:

favicon.ico — мультиразмерный ICO, содержащий 16×16, 32×32, 48×48
favicon-*.png — отдельные PNG-файлы для каждого размера

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

Поместите файлы в корень вашего сайта или папку public/, затем добавьте в <head>:

<!-- ICO (поддержка старых браузеров) -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG (современные браузеры) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

Настройка по фреймворку

Фреймворк	Как настроить
Next.js	Поместить в директорию `app/`, автообнаружение
Vite	Поместить в директорию `public/`
Nuxt	Поместить в `public/` или `assets/`
Create React App	Поместить в директорию `public/`

Настройка иконок PWA

PWA требует объявления иконок в manifest.json:

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

Примечания о maskable-иконках

PWA maskable-иконки должны иметь всё содержимое в безопасной зоне (внутренние 80%). Внешние 20% могут быть обрезаны ОС в круг или другую форму.

Советы по дизайну

Совет 1: Упростить графику

Favicon имеет всего 16×16 пикселей — сложные дизайны превращаются в размытое пятно. Оставьте только основной элемент:

❌ Полный логотип + текст
✅ Основная графика или первая буква

Совет 2: Использовать SVG как источник

Векторные исходные изображения SVG остаются чёткими при любом размере. Конвертируйте SVG в PNG с помощью Конвертации форматов перед генерацией ICO.

Совет 3: Поддержка тёмного режима

Современные браузеры поддерживают атрибут media для favicon в тёмном режиме:

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Частые проблемы

Сгенерированный ICO не отображается в браузере?

Проверьте правильность пути к файлу
Очистите кэш браузера (Ctrl+Shift+R для принудительного обновления)
Убедитесь, что теги link находятся внутри <head>

Файл ICO больше, чем один PNG?

ICO содержит несколько размеров, поэтому он естественно больше. Типичный ICO 16+32+48 весит около 15-30 КБ — вполне приемлемо.

Нужны ли и ICO, и PNG?

Да, предоставляйте оба. ICO поддерживает старые браузеры; PNG обеспечивает лучшее качество рендеринга в современных браузерах.

Связанные инструменты

Генератор ICO — Мультиразмерный ICO + PNG в один клик
Изменение размера изображения — Настроить исходное изображение до целевого размера
Конвертация форматов — SVG в PNG и другие конвертации форматов

Итоги

Favicon могут быть маленькими, но они — важная часть брендинга сайта. Генератор ICO позволяет быстро создать полный набор файлов ICO и PNG из одного исходного изображения, охватывая вкладки браузера, Apple Touch Icons, Android Chrome и иконки запуска PWA. Помните: простое высокоразрешённое исходное изображение, мультиразмерный ICO и полные HTML-ссылки.