Favicon Generator — инструмент, который я сделал для своей работы

Фавикон кажется мелочью, пока не приходится готовить его для реального проекта. Одного PNG 32×32 давно недостаточно: браузерам нужны разные форматы, Apple использует свои иконки, Android — свои, а у PWA появляется ещё отдельный набор требований.

Обычно эта работа выглядит довольно скучно: экспортировать несколько размеров, проверить SVG, собрать ICO, подготовить Apple Touch Icon, manifest, не забыть про тёмную версию, правильно назвать файлы и потом ещё написать код подключения. На одном проекте это терпимо. Когда делаешь сайты постоянно — превращается в рутину.

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

В генератор можно загрузить SVG, PNG, JPEG, WebP или AVIF. После загрузки исходник проходит общую обработку, а дальше из него можно собрать один из трёх вариантов комплекта: Mini / Website, Complete или PWA / App.

Мне было важно не сваливать всё в один ZIP «на все случаи жизни». Если нужен обычный сайт, нет смысла получать лишние PWA-файлы. Если нужен полноценный installable web app — наоборот, лучше иметь отдельный режим с понятными настройками именно для приложения.

Mini я делал как тот комплект, который действительно удобно использовать в обычной работе. Он генерирует favicon.svg, favicon.ico, основные PNG, Apple Touch Icons, Android-иконку, manifest и готовый snippet с подключением.

То есть это не «обрезанная демоверсия» большого режима, а отдельный сценарий: быстро подготовить нормальный favicon-пакет для сайта и не разбираться каждый раз, какие размеры нужны.

В Complete можно отдельно подготовить светлую и тёмную версии favicon. Для SVG цвета этих вариантов настраиваются независимо, поэтому не обязательно заранее экспортировать из графического редактора две разные иконки.

Этот режим также делает более широкий набор размеров. При этом он остаётся именно комплектом для сайта: PWA-специфичные файлы сюда намеренно не подмешиваются.

Для PWA генератор подготавливает обычные и maskable-иконки 192×192 и 512×512, site.webmanifest и код подключения. Здесь же задаются данные приложения и можно посмотреть, как иконка будет выглядеть в Android-контексте и на launch screen.

Я сознательно не стал превращать launch screen в отдельный дизайнерский конструктор. Превью показывает реальную логику PWA: фон берётся из настроек приложения, а в центре используется та же Android/maskable-иконка.

Как дизайнеру мне было важно видеть не только размер 32×32, а сам контекст. Поэтому в интерфейсе есть превью вкладки браузера, активного и неактивного состояния, Android- и iOS-иконок, а в PWA — ещё и launch screen.

Можно менять фон, масштаб и скругление, а у SVG — ещё и обнаруженные цвета. Это позволяет исправить небольшие вещи прямо перед экспортом, не возвращаясь каждый раз в Figma или Illustrator.

На практике SVG из реальных проектов редко бывают идеально одинаковыми. У одного неправильный viewBox, у другого слишком много пустого пространства, у третьего сам рисунок вообще находится за границами видимой области.

Поэтому генератор смотрит не только на формальные размеры SVG, но и на реально отрисовываемое содержимое. Если нужно, можно использовать Fit — подогнать область под фактически видимый объект. Перед рендерингом SVG также проходит очистку и нормализацию.

Ещё одна мелочь, которая для меня на самом деле важна: после загрузки исходника можно переключаться между Mini, Complete и PWA без повторной загрузки файла. Обработанное изображение остаётся в текущей сессии, меняются только доступные настройки и состав будущего архива.

Сам файл с логотипом или иконкой не отправляется на сервер для генерации. Основная обработка идёт прямо в браузере: там разбирается SVG, декодируются растровые изображения, создаются PNG и ICO и собирается итоговый ZIP.

Для меня это нормальная модель именно для такого инструмента: пользователь пришёл со своим исходником, получил результат и ушёл. Нет причины загружать его графику на сервер и хранить её там.

Я бы не стал утверждать, что Favicon Generator делает что-то, чего вообще никто больше не умеет. Для меня отличие в другом: он собран вокруг конкретного рабочего процесса дизайнера и разработчика, а не вокруг идеи «сгенерировать максимально много файлов».

В первую очередь — для себя и людей с похожим рабочим процессом: веб-дизайнеров, frontend-разработчиков, небольших студий и тех, кто самостоятельно собирает сайты. Особенно когда favicon-пакеты приходится готовить не один раз в год, а регулярно.

Мне вообще нравится идея маленьких специализированных веб-инструментов. Когда задача простая и повторяющаяся, не хочется открывать большой редактор, искать старый шаблон или каждый раз просить AI собрать набор файлов заново. Хочется открыть страницу, бросить исходник и сразу получить предсказуемый результат.

Изначально это был просто генератор favicon для моих задач. По мере работы он вырос в отдельное веб-приложение с несколькими режимами, превью, обработкой SVG и PWA-пакетом. При этом я стараюсь удерживать его в исходной логике: он не должен превращаться в тяжёлый комбайн.

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