Почему одна иконка превращается в шесть файлов
Favicon появился в 1999 году как единственный файл favicon.ico размером 16×16, который Internet Explorer искал в корневой папке сайта. С тех пор каждая платформа, показывающая иконку сайта, стала требовать свой размер, и набор разросся:
- 16 px: вкладка браузера и список закладок на обычных экранах.
- 32 px: вкладки на экранах высокой плотности и панель задач Windows, если сайт на ней закреплён.
- 48 px: ярлыки на рабочем столе Windows и некоторые каталоги сайтов.
- 180 px: Apple touch icon — используется, когда сайт добавляют на главный экран iPhone или iPad.
- 192 px и 512 px: иконки на главном экране Android и заставка установленного веб-приложения, объявленные в веб-манифесте.
ZIP содержит favicon.ico с тремя маленькими размерами внутри, apple-touch-icon.png, icon-192.png, icon-512.png и site.webmanifest, который ссылается на две иконки для Android. Архив называется по имени исходного файла, так что из logo.svg получится logo.favicon.zip.
Как создаётся набор
Каждый размер рисуется прямо из исходного файла на собственный прозрачный квадрат. Если изображение не квадратное, оно масштабируется так, чтобы поместиться, и центрируется, а по коротким сторонам остаётся прозрачное поле. SVG растеризуется заново для каждого размера, поэтому иконка в 16 px получает ту же векторную точность, что и в 512 px; растровое изображение уменьшается со сглаживанием браузера.
Файл ICO хранит три изображения как PNG-данные внутри контейнера ICO — этот вариант поддерживается начиная с Windows Vista и всеми современными браузерами. Он сохраняет полную прозрачность и обычно гораздо меньше старого ICO на основе растровых bitmap.
Вся отрисовка выполняется через Canvas API в вашем браузере. Принимаются исходники до 20 МБ в форматах PNG, JPG, WebP или SVG.
Как сделать логотип, который выживет в 16 пикселях
В квадрате 16×16 всего 256 пикселей. Детализированный логотип в таком размере превращается в размытое пятно, и это проблема дизайна, которую не исправит никакая настройка экспорта. Что работает:
- Используйте знак, а не полный логотип. Одну букву, монограмму или символ логотипа без надписи.
- Толстые формы и мало цветов. Линии тоньше примерно 1/16 ширины исчезают на самом маленьком размере.
- Заполняйте квадрат. Перед генерацией обрежьте пустые поля в исходнике; логотип, плавающий в большом прозрачном пространстве, во вкладке окажется крошечным.
- Проверьте обе темы. Панели вкладок браузера бывают светлыми и тёмными. Чёрная иконка на прозрачном фоне пропадает на тёмной панели; помогает светлый контур или сплошная цветная подложка.
Если версия в 16 px всё равно выглядит мутно, стоит подготовить отдельный упрощённый исходник, сгенерировать набор из него, а крупные PNG взять из детализированной версии.
Особенности платформ, которые стоит знать
Прозрачные Apple touch icon
iOS не показывает прозрачность у иконок на главном экране: прозрачные области заливаются, обычно чёрным. Поскольку генератор сохраняет прозрачность, логотип на прозрачном фоне на iPhone окажется в тёмном квадрате. Для чистого результата используйте исходник со сплошным цветным фоном или экспортируйте логотип вместе с фоном, прежде чем перетаскивать его сюда.
Как дополнить веб-манифест
Входящий в набор site.webmanifest перечисляет только две иконки. Если сайт должен устанавливаться как приложение, откройте файл в текстовом редакторе и добавьте как минимум name, short_name, start_url, display (например, standalone) и theme_color. Без них браузеры подставят заголовок страницы и не предложат установку.
Упрямое кэширование
Браузеры агрессивно кэшируют favicon — иногда по нескольку дней и независимо от кэша страницы. Если после загрузки новых файлов продолжает показываться старая иконка, откройте URL иконки напрямую и перезагрузите его или добавьте к ссылкам на иконки в HTML параметр версии вроде ?v=2.
Как выбрать исходный файл
Квадратный SVG — самый удобный исходник, потому что он чётко отрисовывается в 512 px, каким бы маленьким ни был исходный рисунок. Если у вас векторный логотип в другом формате, экспортируйте его в SVG или в PNG размером не меньше 512×512. Для растрового логотипа, который существует только в маленьком размере, предварительное увеличение инструментом увеличить изображение даст иконке в 512 px более чистые края, чем простое растягивание. Логотип с широкой надписью лучше заранее обрезать до символа инструментом обрезать изображение, чем позволить ему сжаться в тонкую полоску посреди квадрата.