Размеры favicon: все размеры, которые действительно нужны
Нужные размеры favicon — это 16x16 и 32x32 PNG для вкладок браузера и закладок, 180x180 для iOS apple-touch-icon и 192x192 плюс 512x512 PNG для домашнего экрана Android и установки PWA. Файл favicon.ico с записями 16, 32 и 48 пикселей покрывает всё, что запрашивает /favicon.ico напрямую. Любой другой размер опционален, и большинство сайтов не поставляют ни одного.
Зачем больше одного размера
Вкладка браузера запрашивает иконку шириной примерно 16–32 пикселя. Домашний экран Android — 192. Экран загрузки PWA — 512. Это не одна и та же картинка в разном масштабе. На 16 пикселях у знака около 256 пикселей рабочей площади, и всё, что там выживает, должно быть намного проще того, что хорошо смотрится на 512.
Когда вы объявляете несколько размеров, браузер выбирает ближайший и масштабирует от него. Если объявить только большую иконку, каждая маленькая поверхность будет её уменьшать — отсюда и серое пятно на вкладке. Если объявить только маленькую, каждая большая поверхность будет её увеличивать — отсюда и размытая иконка на домашнем экране.
Основные размеры favicon
| Размер | Где используется | Приоритет |
|---|---|---|
| 16x16 | Адресная строка, старые браузеры, закладки | Обязательный |
| 32x32 | Вкладки браузера, современные браузеры | Обязательный |
| 96x96 | Ярлыки на рабочем столе, плитки Windows | Необязательный |
| 192x192 | Домашний экран Android, иконки PWA | Обязательный |
| 512x512 | Экраны загрузки, иконки высокого разрешения | Обязательный |
Как эти цифры выглядят
Размеры apple touch icon
| Размер | Устройство |
|---|---|
| 57x57 | iPhone (без retina) |
| 60x60 | iPhone (retina) |
| 72x72 | iPad (без retina) |
| 76x76 | iPad (retina) |
| 114x114 | iPhone (retina) |
| 120x120 | iPhone (retina HD) |
| 144x144 | iPad (retina) |
| 152x152 | iPad (retina HD) |
| 180x180 | iPhone (retina HD), основной |
Куда кладутся файлы
- public/
- favicon.ico16, 32 and 48 in one file
- favicon-16x16.pngAddress bar
- favicon-32x32.pngBrowser tabs
- favicon-96x96.pngDesktop shortcuts
- apple-touch-icon.png180x180, iOS home screen
- icon-192.pngAndroid home screen
- icon-512.pngPWA splash screen
- manifest.jsonLists the PWA icons
Плоско в корне public — это стандартная практика, потому что несколько из этих файлов также запрашиваются по пути, без всякого тега <link>.
Частые вопросы о размерах favicon
Каков минимальный набор размеров favicon?
Файл favicon.ico с записями 16 и 32, apple-touch-icon.png 180x180, а также PNG 192x192 и 512x512, перечисленные в веб-манифесте приложения. Это покрывает десктопные браузеры, домашние экраны iOS, Android и установку PWA всего пятью файлами.
Нужны ли ещё 57x57 и 72x72 для iOS?
Только если вы поддерживаете очень старые iPhone и iPad. Современная iOS использует apple-touch-icon 180x180 и уменьшает его там, где нужно что-то поменьше, так что одного 180 достаточно почти для любого сайта.
Замедляет ли страницу более крупный favicon?
Сколько-нибудь заметно — нет. Иконки — это маленькие PNG в считанные килобайты, браузеры запрашивают только нужный размер, и к тому же они агрессивно кешируются. Отдать неиспользуемый 512 обходится дешевле, чем размытая иконка на домашнем экране.