Генератор favicon

Одному-единственному файлу значка пришлось бы обслуживать и вкладку браузера при 16 пикселях, и главный экран телефона при 180 пикселях, и меню приложений Android вплоть до 512 пикселей, и плитку на панели задач Windows — поверхности с совершенно разными правилами разрешения, обработки пропорций и компоновки с фоном, ни для одной из которых нет единого идеального исходного разрешения. Исторически именно поэтому сайты либо ограничивались низким разрешением `favicon.ico`, которое везде, кроме вкладки браузера, выглядело размыто, либо вовсе пропускали значки для мобильных устройств и PWA. Генерация всех размеров из одного источника и упаковка их вместе — это то, что делает значок чётким и корректным сразу на всех поверхностях, а не приемлемым на одной и неправильным на всех остальных.

Веб-манифест существует по смежной, но отдельной причине: именно он позволяет Android и десктопным браузерам на Chromium предлагать «Установить приложение» и показывать сайт с собственным значком и названием после установки, а не как закладку с обычным значком-глобусом. Favicon и значок PWA обрабатываются разными частями платформы, поэтому здесь одновременно генерируются и обычный набор значков, и манифест.

Вкладка браузера — самое маленькое и при этом чаще всего встречающееся отображение favicon, и оно беспощадно: при 16×16 пикселях есть место для одного жирного силуэта, максимум двух, и практически нет места для текста, кроме одной буквы или цифры. Многоэлементный логотип, выглядящий отточенным в обычном размере, при размере вкладки обычно превращается в бесформенное пятно, потому что деталям, делающим его узнаваемым, просто не остаётся пикселей для отображения.

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

Favicon с прозрачным фоном чисто вписывается и в светлую, и в тёмную тему вкладок браузера, — это правильный выбор всякий раз, когда самой графике фон не нужен. Однако для некоторых мест назначения прозрачность вообще не подходит — в частности, значок Apple touch iOS накладывает на сплошную подложку ещё до применения собственной маски со скруглёнными углами, поэтому прозрачный исходник даёт логотип, «парящий» на чёрном фоне, вместо чистой плитки, какую имеют все остальные значки приложений iOS. Выбор сплошного цвета фона заранее, подобранного под цвет бренда, а не оставленного белым или чёрным по умолчанию, — вот что делает значок выглядящим продуманно на любой поверхности, а не просто корректным на некоторых из них.