Размеры фавикона сегодня сводятся к пяти файлам: favicon.ico 32×32, SVG-иконка, Apple touch icon 180×180 и два PNG в манифесте веб-приложения, 192×192 и 512×512, один из них maskable. Всё остальное, например Apple-иконки 57×57, плитки Windows или лишние PNG других размеров, устарело и не нужно.
Таблица размеров
| Файл | Размер | Где используется | Примечания |
|---|---|---|---|
favicon.ico | 32×32 (может содержать также 16 и 48) | Все браузеры, RSS-ридеры, всё, что запрашивает /favicon.ico | Держите его в корне сайта, даже если HTML объявляет другие иконки. |
favicon.svg | Любой, квадратный viewBox | Вкладки в Chrome, Edge и Firefox | Чёткий при любом размере и умеет менять цвета в тёмной теме. |
favicon-96x96.png | 96×96 | Поиск Google | Необязателен, если объявлен Apple touch icon: Google читает оба. |
apple-touch-icon.png | 180×180 | Главные экраны iPhone и iPad, поиск Google | Непрозрачный фон. Углы iOS скругляет сама. |
| Иконка манифеста | 192×192 | Главный экран Android | Указывается в icons в манифесте веб-приложения. |
| Иконка манифеста | 512×512 | Запрос установки, экран-заставка | Критерии установки в Chrome требуют иконки 192 и 512. |
| Maskable-иконка | 512×512 | Адаптивные иконки Android | "purpose": "maskable", логотип внутри центрального круга на 80%. |
Вкладки браузера: favicon.ico и SVG
Вкладка показывает иконку размером 16 CSS-пикселей, то есть 32 физических пикселя на экране с высокой плотностью. Поэтому важнее всего изображение 32×32 внутри favicon.ico. При желании добавьте в тот же файл 16 и 48: браузер выберет ближайшее.
SVG-иконка закрывает сразу все размеры. В неё можно добавить медиазапрос prefers-color-scheme, и тёмный логотип станет светлым на тёмных вкладках. Сначала объявите ICO с sizes="32x32", затем SVG: браузеры с поддержкой SVG возьмут его, остальные вернутся к ICO.
Поиск Google
В руководстве Google по фавиконам требуется квадратная иконка не меньше 8×8 пикселей, а рекомендуется больше 48×48. Поддерживаются форматы BMP, GIF, ICO, PNG, JPEG, PPM и TIFF. SVG в этом списке нет, поэтому на сайте только с SVG Google нечего использовать. Google читает и rel="icon", и rel="apple-touch-icon", так что объявленный Apple touch icon 180×180 уже подходит под рекомендацию по размеру. Если нужен отдельный файл, подойдёт PNG 96×96.
iPhone и iPad
iOS использует Apple touch icon, когда пользователь добавляет сайт на главный экран. Для современных iPhone нужен размер 180×180 (60 пунктов при масштабе 3×), iPad без проблем уменьшают его, так что хватает одного файла. Прозрачные области на главном экране становятся чёрными, поэтому задайте иконке сплошной фон. Без неё iOS берёт скриншот страницы или букву на однотонной плитке.
Android и устанавливаемые веб-приложения
Android и Chrome берут иконки из манифеста веб-приложения. Иконка 192×192 идёт на главный экран, а 512×512 показывается в диалоге установки и на экране-заставке.
Maskable-иконка: отдельное изображение 512×512, рисунок в нём занимает весь квадрат. Android обрезает её по форме, которую использует телефон: круг, суперэллипс или квадрат со скруглёнными углами. Держите логотип внутри центрального круга диаметром 80% от изображения, и он переживёт любую маску. Без maskable-иконки Android уменьшает обычную и кладёт её на белый круг.
HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">И часть с иконками в site.webmanifest:
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Отдавайте манифест как application/manifest+json, а каждую иконку с её настоящим типом изображения. Если сервер отвечает на /favicon.ico HTML-страницей со статусом 200, иконка не работает, хотя во вкладке Network всё выглядит нормально. Так часто делают одностраничные приложения.
Размеры, которые можно убрать
- Apple touch icon 57, 60, 72, 76, 114, 120, 144 и 152 px. iOS масштабирует иконку 180 px.
mstile-*.png,browserconfig.xmlи тегиmsapplication-*. Они нужны были для плиток Windows 8 и 10.mask-iconдля Safari. Safari 12 и новее используют для закреплённых вкладок обычный фавикон.- Отдельные ссылки на PNG 16×16 и 32×32, если
favicon.icoуже содержит оба размера.
Проверьте свой набор
Favicon Checker загружает с вашего сайта все перечисленные файлы, измеряет настоящий размер и формат и показывает, как иконки выглядят на вкладках, в Google, iOS и Android.