Toolz: генерируем полный набор фавиконок

13.03.2026

Зачем вообще нужен набор фавиконок

Времена единственного favicon.ico в корне сайта давно прошли. Современный браузер, устройство на iOS, Android — каждый запрашивает свой формат. Без подготовленного пакета:

На iPhone иконка в закладках «Safari» выглядит как скриншот страницы, а не логотип
Android-приложение (PWA) не найдёт иконку для экрана «Домой»
Браузер на macOS покажет мутный масштабированный ICO вместо чёткого SVG
Тёмная тема браузера засветит тёмный логотип на белом фоне

Ручная подготовка — это несколько часов: экспорт из Figma, ресайз, правильный ICO с несколькими слоями, манифест с нужными полями, HTML-код со всеми <link>-тегами. Fav Icona делает это за несколько минут.

Что генерирует модуль

На выходе — ZIP-архив с файлами:

Файл	Назначение
`favicon.ico`	ICO с двумя слоями: 16×16 и 32×32 пикселя
`favicon.svg`	Адаптивная SVG-иконка с поддержкой тёмной темы
`favicon-32x32.png`	PNG для браузеров без поддержки SVG
`favicon-96x96.png`	PNG для Google Search, Android Chrome
`apple-touch-icon.png`	Иконка 180×180 для iOS Safari
`web-app-manifest-192x192.png`	Иконка для Android/PWA
`web-app-manifest-512x512.png`	Иконка для Android/PWA (большая)
`site.webmanifest`	Манифест Web App с именем, цветами и иконками

Дополнительно генерируется готовый HTML-сниппет со всеми <link> и <meta> тегами — вставляется напрямую в <head> без правок.

Рабочий процесс

Модуль организован как последовательность шагов:

Загрузка исходного изображения — SVG, PNG, JPG или WebP
Кадрирование — редактор для обрезки и масштабирования исходника
Настройка Regular Favicon — параметры для браузерной иконки
Настройка Apple Touch Icon — параметры для iOS
Настройка Android/PWA — параметры для манифеста
Путь к файлам — директория размещения иконок на сервере
Генерация и скачивание — сборка архива

Каждый шаг отображается в отдельном блоке. Настройки применяются во время генерации — превью в каждой секции отображает итоговый результат в реальном времени.

Редактор исходного изображения

Перед настройкой фавиконок исходное изображение можно кадрировать прямо в браузере.

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

Управление:

Вокруг изображения рисуется bounding box с 8 контрольными точками
Угловые точки изменяют масштаб пропорционально
Рёберные точки растягивают изображение по одной оси
Перетаскивание тела изображения — сдвиг без изменения размера
Курсор меняется в зависимости от типа операции

Кнопки:

Сбросить — возвращает изображение к исходному положению «по центру зоны»
Отмена — закрывает редактор без изменений
Применить — экспортирует кадрированную область в 512×512 PNG и использует её для всех последующих шагов

Исходный файл при этом сохраняется — можно открыть редактор повторно и кадрировать иначе.

Настройка Regular Favicon

Секция управляет браузерной иконкой — файлами favicon.ico, favicon.svg, favicon-32x32.png, favicon-96x96.png.

Режимы оформления:

Без фона — прозрачный фон, иконка как есть
С фоном — заливка цветом с настройкой скругления углов и масштаба изображения
Яркость — коррекция светлоты без фона

Параметры режима «С фоном»:

Параметр	Диапазон	По умолчанию
Цвет фона	Colorpicker	`#ffffff`
Скругление углов	0–100%	70%
Масштаб изображения	0–100%	40%

Тёмная тема браузера

Браузеры на macOS и Windows поддерживают prefers-color-scheme: dark. SVG-фавиконка может адаптироваться к теме автоматически.

В секции Regular — отдельный блок «Тёмная тема»:

Источник иконки:

Та же иконка — для тёмной темы используется то же изображение, что и для светлой
Своя иконка — загружается отдельный файл для тёмного варианта

Режимы оформления тёмной темы:

Без изменений — тёмная тема наследует все настройки светлой
С фоном — отдельный цвет фона, радиус и масштаб для тёмного варианта
Яркость — коррекция светлоты: полезно для логотипа, нарисованного на белый фон
Инверсия — инвертирует цвета иконки

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

Итоговый favicon.svg содержит оба варианта через @media (prefers-color-scheme: dark). Браузер сам выбирает нужный. favicon.ico всегда светлый — ICO не поддерживает медиазапросы.

Настройка Apple Touch Icon

Секция управляет файлом apple-touch-icon.png (180×180 px) — иконкой, которую Safari показывает при добавлении сайта на экран «Домой» в iOS.

Режимы оформления:

Без фона — прозрачный фон
С фоном — iOS не поддерживает прозрачность для Touch Icon: скругление углов и тень добавляет сама система, поэтому заливка фоном — стандартная практика

Параметры режима «С фоном» те же: цвет, скругление, масштаб.

Превью отображает иконку в виде плитки на экране iOS с именем приложения под ней.

Настройка Android / PWA

Секция отвечает за web-app-manifest-192x192.png, web-app-manifest-512x512.png и site.webmanifest.

Параметры иконки:

Параметр	Описание
Режим	Без фона / С фоном
Цвет фона	Фон иконки в маскируемом формате
Масштаб	Отступ изображения внутри `maskable`-зоны

Параметры манифеста:

Поле	Описание
`name`	Полное название приложения
`short_name`	Короткое имя для экрана «Домой»
`background_color`	Цвет splash-экрана при запуске PWA
`theme_color`	Цвет строки браузера на Android

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

В манифест включаются иконки с двумя значениями purpose:

json Copy

{ "purpose": "any" }
{ "purpose": "maskable" }

maskable — обязательный формат для иконок в Android, иначе система обрезает углы произвольно.

Путь к файлам

Поле с путём указывает директорию, где будут размещены иконки на сервере. Значение по умолчанию — / (корень).

Если иконки размещены в поддиректории — например, /assets/favicons/ — нужно прописать этот путь. Он подставляется во все ссылки в site.webmanifest и HTML-сниппете автоматически.

Генерация и HTML-код

После настройки всех секций — кнопка «Далее». Модуль параллельно собирает все файлы:

Рендерит PNG-варианты через Canvas API с нужными параметрами (фон, скругление, масштаб, яркость)
Собирает ICO из двух PNG-слоёв в бинарном формате
Строит адаптивный SVG с медиазапросом для тёмной темы
Генерирует site.webmanifest с реальными данными
Упаковывает всё в ZIP через JSZip

Затем открывается финальный экран с готовым HTML-кодом:

html Copy

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Порядок тегов важен: SVG идёт первым, поэтому современные браузеры используют его (с поддержкой тёмной темы), устаревшие — ICO.

Обработка локально

Все вычисления выполняются в браузере. Изображения не отправляются ни на какие серверы. SVG-код исходника, если он содержит встроенные данные, остаётся на стороне пользователя.

Типичные сценарии

Блог или личный сайт: Загрузить SVG логотипа → кадрировать под квадрат → добавить белый фон с небольшим скруглением → для тёмной темы поставить режим «Яркость» → скачать архив.

PWA-приложение: Загрузить иконку приложения → настроить maskable-фон для Android → заполнить имя и цвета → сгенерировать манифест с правильными путями.

Минималистичный сайт с прозрачной иконкой: Загрузить SVG → оставить режим «Без фона» для всех секций → для тёмной темы добавить инверсию → скачать архив.

Fav Icona доступна на toolz.macrulez.ru вместе с Image Compressor, Tiny SVG и Gradient Fabric.