Размеры favicon: все размеры, которые действительно нужны
Нужные размеры favicon — это 16x16 и 32x32 PNG для вкладок браузера и закладок, 180x180 для iOS apple-touch-icon и 192x192 плюс 512x512 PNG для домашнего экрана Android и установки PWA. Файл favicon.ico с записями 16, 32 и 48 пикселей покрывает всё, что запрашивает /favicon.ico напрямую. Любой другой размер опционален, и большинство сайтов не поставляют ни одного.
Размеры, которые вам действительно нужны
| Размер | Используется для | Оставить? |
|---|---|---|
| 16, 32, 48 | Вкладка браузера и закладки, собранные внутри favicon.ico | Оставить |
| 180x180 | apple-touch-icon для домашнего экрана iOS | Оставить |
| 192x192 | Иконка лаунчера Android, указанная в манифесте | Оставить |
| 512x512 | Заставка и запрос установки PWA, указанные в манифесте | Оставить |
| SVG | Чёткая иконка вкладки при любом размере, может адаптироваться к тёмной теме | Опционально |
Зачем больше одного размера
Вкладка браузера запрашивает иконку шириной примерно 16–32 пикселя. Домашний экран Android — 192. Экран загрузки PWA — 512. Это не одна и та же картинка в разном масштабе. На 16 пикселях у знака около 256 пикселей рабочей площади, и всё, что там выживает, должно быть намного проще того, что хорошо смотрится на 512.
Когда вы объявляете несколько размеров, браузер выбирает ближайший и масштабирует от него. Если объявить только большую иконку, каждая маленькая поверхность будет её уменьшать — отсюда и серое пятно на вкладке. Если объявить только маленькую, каждая большая поверхность будет её увеличивать — отсюда и размытая иконка на домашнем экране.
Как эти цифры выглядят
Размеры, которые стоит перестать отгружать
| Размер | Предназначался для | Оставить? |
|---|---|---|
| 57, 60, 72, 76 | apple-touch-icon для iOS 6 и более старых iPad | Убрать |
| 114, 120, 144, 152 | Retina apple-touch-icon для старых iPhone и iPad | Убрать |
| 70, 150, 310 | Иконки плиток Windows через browserconfig.xml | Убрать |
| 160, 196 | Разные старые размеры ярлыков Android и Chrome | Убрать |
Куда кладутся файлы
- 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 обходится дешевле, чем размытая иконка на домашнем экране.
Стоит ли отгружать иконки плиток Windows?
Нет. Размеры плиток 70, 150 и 310 и browserconfig.xml были нацелены на живые плитки Windows, которые упразднены. Уберите их.
Может ли favicon.ico содержать более одного размера?
Да. Формат .ico — это контейнер, который содержит 16, 32 и 48 в одном файле. Браузер выбирает нужный ему размер изнутри него.