Поиск по запросу «размер фавикона» до сих пор выдаёт списки из пятнадцати файлов, пришедшие из 2014 года. На практике шесть размеров покрывают вкладки браузера, результаты поиска, iOS, Android и PWA. Разберём каждый и объясним его назначение.
Размеры, которые действительно нужны
Каждая строка соответствует документированному назначению в предлагаемом наборе. Вместо коллекции исторических вариантов таблица предлагает небольшой совместимый набор файлов.
| Файл | Размеры | Назначение |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Вкладки, закладки, старые браузеры, поисковые роботы |
| favicon.svg | векторный, квадратный | Современные браузеры, чёткость при любом размере, поддержка тёмной темы |
| favicon-96x96.png | 96×96 | Мобильные результаты поиска Google |
| apple-touch-icon.png | 180×180 | Главный экран iOS и iPadOS, без прозрачности |
| web-app-manifest-192x192.png | 192×192 | Главный экран Android, объявляется в веб-манифесте |
| web-app-manifest-512x512.png | 512×512 | Экран запуска PWA, вариант «maskable» |
Почему 16, 32 и 48 находятся в одном .ico
ICO — контейнерный формат: один файл может содержать несколько изображений, и браузер выбирает подходящее для текущего отображения. Именно это и нужно, поскольку запрашиваемый размер меняется в зависимости от контекста.
16×16 используется во вкладке на обычном экране. 32×32 даёт вариант для дисплеев высокой плотности и других элементов браузера. 48×48 дополняет контейнер и соответствует описанному Google правилу кратности 48 для фавиконов в поисковой выдаче.
Самая распространённая ошибка — отдавать .ico только с изображением 16×16. На экране Retina браузер увеличит его, и значок будет постоянно выглядеть размытым.
180×180 для iOS, 192 и 512 для Android
iOS не берёт значок главного экрана из веб-манифеста: она ищет тег apple-touch-icon. Достаточно одного размера 180×180, который подходит для всех современных iPhone и iPad. На старых устройствах система сама уменьшает изображение.
Android, напротив, использует веб-манифест. Достаточно двух записей: 192×192 для главного экрана и 512×512 для заставки при установке сайта как приложения. Для варианта 512 следует указать purpose «maskable»: его рисунок должен выдерживать обрезку до круга или квадрата со скруглёнными углами.
В значке maskable держите всё важное внутри центральных 80%. Части за пределами этой области могут быть обрезаны в зависимости от производителя телефона.
Какое исходное изображение выбрать
Лучший исходник — SVG: он масштабируется без потерь до любого из указанных размеров. Если его нет, возьмите квадратный PNG не меньше 512×512 пикселей. Тогда даже значок заставки Android получится уменьшением, а не увеличением.
Горизонтальный логотип с текстом не работает при 16×16: слово превращается в несколько невнятных пикселей. Выделите графический символ или начните с одной-двух букв на контрастном фоне.
В конце проверьте контраст на светлом и тёмном фоне: чёрный логотип исчезает в тёмной вкладке. Для этого и нужен тёмный вариант SVG-фавикона.
Размеры, которые больше не нужны
Старые генераторы продолжают создавать файлы для исторических интеграций, например плиток Windows с mstile-150x150.png и browserconfig.xml. Добавляйте их только тогда, когда эти интерфейсы явно входят в список поддерживаемых.
Длинная серия apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 и 152x152 появилась, когда iOS не умела менять размер. Одно изображение 180×180 заменяет их все.
Удаление ненужных объявлений упрощает репозиторий и HTML. Но прежде чем убирать существующую интеграцию, проверьте целевые браузеры и платформы своего проекта.
Первоисточники
Частые вопросы
Нужен ли ещё favicon.ico?
Да, но достаточно файла в корне сайта. Современные браузеры предпочитают SVG, однако многие поисковые роботы, агрегаторы и почтовые клиенты по-прежнему запрашивают /favicon.ico, не читая HTML. Файл весит несколько килобайт: оставьте его.
Какой размер фавикона Google использует в поиске?
Google просит значок со стороной, кратной 48 пикселям, и обычно показывает его при 48×48. PNG 96×96 или SVG легко закрывает эту задачу. Значок должен быть доступен роботу и не заблокирован в robots.txt.
Может ли фавикон быть прямоугольным?
Технически да, визуально — не стоит. Везде для значка выделен квадрат: прямоугольное изображение либо исказится, либо окажется по центру с пустыми полосами. Всегда начинайте с квадрата, при необходимости добавляя отступы вокруг символа.