Favicon — это больше не одно изображение. Браузеры, телефоны и операционные системы каждый берут свой размер для своего слота — вкладка браузера, закладка, домашний экран iOS, переключатель приложений Android. Отгрузите один PNG 32×32 — и он сработает во вкладке, но будет выглядеть размыто, когда кто-то сохранит ваш сайт на телефон. Отгрузите полный набор — и каждая поверхность получит чёткую иконку.
Вот ровно какие размеры вам нужны, что делает каждый и почему список выглядит так, как выглядит.
Размеры, которые имеют значение
Большинство сайтов покрыты шестью размерами PNG плюс устаревший .ico. Вот справочник:
| Размер | Формат | Где используется |
|---|---|---|
| 16×16 | PNG (в .ico) | Вкладка браузера, адресная строка, закладки |
| 32×32 | PNG (в .ico) | Retina-вкладки, ярлыки панели задач Windows |
| 48×48 | PNG | Иконки сайтов Windows, некоторые поверхности Android |
| 180×180 | PNG | Домашний экран iOS (apple-touch-icon) |
| 192×192 | PNG | Домашний экран Android, установка PWA |
| 512×512 | PNG | Экран заставки PWA, магазины приложений, высокий DPI |
Файл favicon.ico — это контейнер, объединяющий маленькие размеры (обычно 16 и 32, иногда 48). Старые браузеры и Windows ищут его по имени в корне вашего сайта, так что его всё ещё стоит отгружать, хотя современные браузеры охотно используют PNG.
Почему их так много? Быстрый обзор
Причина длинного списка в том, что иконка появляется в дико разных физических размерах.
16 и 32 — повседневные иконки вкладок. 16 — классический размер; 32 покрывает экраны высокого DPI («Retina»), где 16 выглядело бы мягким. Браузеры выбирают тот, что подходит под плотность пикселей.
48 — это про Windows: используется для ярлыков сайтов и выглядит резче в нескольких местах, которые 32 покрывает плохо.
180 — это apple-touch-icon от Apple. Когда кто-то жмёт «На экран Домой» на iPhone или iPad, iOS использует его. Ошибитесь — и iOS либо возьмёт уменьшенный скриншот, либо покажет простую буквенную плитку — ни то ни другое не похоже на ваш бренд.
192 и 512 — размеры Progressive Web App, объявленные в файле manifest.webmanifest. 192 — иконка домашнего экрана Android; 512 питает экран заставки и уменьшается для всего остального, что нужно ОС. Если ваш сайт устанавливаемый, эти два не обсуждаются.
Нужен ли размер больше 512?
Нет. 512×512 — практический потолок для веб-favicon: спецификация webmanifest и каждая крупная платформа заканчиваются примерно там. Если ваш исходник 1024 или больше, это нормально как стартовое изображение (больше деталей для уменьшения), но favicon 1024 вы не отгружаете. Всё выше 512 лишь добавляет байты, которыми никто не пользуется.
Единственное правило, важное вверх: начинайте с большого квадратного исходника. Оригинал 512×512 или 1024×1024 чисто уменьшается до каждого размера ниже. Начните с крошечного изображения — и маленькие размеры выйдут мутными, потому что там изначально не было достаточно детали, чтобы сохранить.
Проектируйте так, чтобы пережить 16×16
Самый сложный размер — самый маленький. При 16×16 детальный логотип превращается в нечитаемое пятно. Несколько советов, работающих на разных сайтах:
- Упрощайте. Полный словесный знак не прочитается при 16px. Используйте одну букву, монограмму или самую узнаваемую часть знака.
- Держите контраст высоким, чтобы форма оставалась разборчивой на светлом и тёмном фоне вкладки.
- Оставьте немного отступа — иконка, касающаяся всех четырёх краёв, ощущается тесной во вкладке.
- Проверьте маленькой. Уменьшите масштаб браузера или просто посмотрите на реальную вкладку. Если с первого взгляда не понять, что это, упрощайте дальше.
Генерация всего набора
Вы не строите их вручную. Перетащите одно квадратное изображение в генератор favicon, и он произведёт полный набор разом — favicon.ico, PNG 16/32/48/180/192/512, готовый к использованию webmanifest и точный HTML-фрагмент <head> для вставки. Всё работает в вашем браузере: изображение никогда не загружается, а после первого визита инструмент работает офлайн.
HTML, который у вас в итоге получится
Для справки полная настройка favicon выглядит примерно так в вашем <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Генератор пишет это за вас, так что можно вставить прямо. Покройте шесть размеров плюс .ico и манифест — и каждый браузер, телефон и ОС получат чёткую иконку, которую просят.