Проверка favicon
Одна маленькая картинка представляет ваш сайт во вкладках, закладках, на главном экране телефона и в результатах поиска, и каждому из этих мест нужен свой файл. Эта проверка скачивает каждую опубликованную иконку и измеряет её.
Один логотип, четыре разных запроса
Слово «favicon» появилось в 1999 году, когда Internet Explorer 5 начал искать файл favicon.ico, чтобы украсить меню «Избранное». Этот квадрат в 16 пикселей запрашивается и сегодня, но теперь у него есть компания. Какой файл будет загружен, зависит от устройства посетителя:
| Где показывается | Какой файл используется | Размер |
|---|---|---|
| Вкладка браузера, закладки, история | favicon.ico или PNG либо SVG, объявленный через rel="icon" | От 16 до 48 px или вектор |
| Главный экран iPhone и iPad | rel="apple-touch-icon" | 180 × 180 px |
| Главный экран Android, установленное веб-приложение | Иконки, перечисленные в веб-манифесте | 192 и 512 px |
| Результаты Google на телефонах | Файл rel="icon" | Кратно 48 px или вектор |
Когда нужного файла нет, каждая система подставляет что-то похуже. Во вкладке появляется значок пустой страницы, на iOS крошечный снимок вашей страницы, на Android буква в сером круге, в Google глобус.
Что скачивается и измеряется
Проверка читает HTML указанной страницы и собирает все <link>, у которых rel равен icon, apple-touch-icon или mask-icon, а также ссылку manifest и иконки, перечисленные в этом файле. Затем она добавляет два адреса, которые браузеры пробуют без подсказки: /favicon.ico и /apple-touch-icon.png.
Загружается до 16 файлов. Объявленному атрибуту sizes мы на слово не верим. ICO-файл открывается, чтобы перечислить упакованные в нём размеры, у SVG читается viewBox, а файлы PNG и JPEG измеряются в пикселях. У иконки Apple углы проверяются на прозрачность. Файл, который на деле оказался HTML-страницей ошибки, так и отмечается, и с /favicon.ico такой сюрприз встречается часто.
Как читать список проверок
- Классический favicon
- Проходит с файлом ICO или PNG размером 16, 32 или 48 px. Не проходит, если ничего такого нет, и получает предупреждение, если единственная иконка в формате SVG: программы для чтения лент, старые браузеры и многие инструменты запрашивают
/favicon.icoи больше ничего. - SVG-иконка
- Необязательна. Векторный файл остаётся чётким при любом размере и может менять цвета в тёмном режиме.
- Иконка Apple
- Не проходит при отсутствии. Предупреждения: меньше 180 px, прозрачный фон (iOS закрашивает его чёрным) или файл, который лежит по адресу по умолчанию, но не объявлен тегом на странице.
- Манифест
- Предупреждение, если страница ни на какой не ссылается. Если ссылается на манифест, который не загружается или не является валидным JSON, это провал. Внутри него отсутствие иконки 192 px: провал, отсутствие иконки 512 px: предупреждение, а отсутствие «maskable»-иконки: примечание.
- Цвет темы
- Необязателен.
<meta name="theme-color">окрашивает панель браузера на Android. - Размер, который принимает Google
- Предупреждение, если нет ни одной квадратной иконки размером кратно 48 px (48, 96, 144, 192) или в формате SVG.
Любой провал даёт вердикт «Неполно», любое предупреждение «Почти». Макеты над списком показывают, какую иконку выбрала бы каждая система из того, что вы публикуете.
Полный набор из одного рисунка
Начните с квадратной версии логотипа, упрощённой настолько, чтобы её можно было узнать в 16 пикселях. Экспортируйте такие файлы:
favicon.icoс изображениями 16, 32 и 48 px внутри, в корне сайта.icon.svg, если логотип есть в векторе.apple-touch-icon.png, 180 × 180, на сплошном фоне с полями около 20 px. Углы iOS скругляет сама.icon-192.pngиicon-512.pngдля манифеста.icon-maskable-512.pngс логотипом в центральных 80% квадрата, потому что Android может обрезать картинку до круга.
Затем объявите их:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">В результатах есть этот блок и подходящий к нему site.webmanifest с уже вписанным названием вашего сайта.
Проверка говорит, что файлы существуют и имеют правильные размеры. Она не может сказать, читается ли рисунок в 16 px и хорошо ли он смотрится на тёмной панели вкладок. Посмотрите на макеты, а потом на настоящий телефон.
Частые вопросы
Какого размера должен быть favicon?
Нужно несколько. Положите favicon.ico с размерами 16, 32 и 48 px, PNG 180 px для устройств Apple и PNG 192 и 512 px в веб-манифест. SVG-иконка в современных браузерах закрывает все размеры вкладок сразу.
Почему Google показывает глобус вместо моего favicon?
Google нужна квадратная иконка размером кратно 48 px или SVG, объявленная через rel="icon" на главной и доступная Googlebot (не закрытая в robots.txt). После исправления новая иконка появится, когда главная будет просканирована заново, а это может занять от нескольких дней до нескольких недель.
Нужен ли ещё файл favicon.ico?
Да. Браузеры принимают PNG и SVG, но множество других программ запрашивают /favicon.ico напрямую: программы для чтения лент, сервисы предпросмотра ссылок, некоторые менеджеры паролей и старые браузеры. Без него ваш сервер к тому же пишет в журнал 404 на каждый такой запрос.
Почему на iPhone у моей иконки чёрный фон?
У apple-touch-icon есть прозрачные участки, а iOS заливает прозрачность чёрным. Экспортируйте PNG на непрозрачном фоне в цвете вашего бренда.
Я поменял favicon. Почему я всё ещё вижу старый?
Браузеры держат favicon в кэше дольше почти любого другого файла. Откройте адрес иконки напрямую и перезагрузите его или добавьте к ссылке версию, например href="/favicon.ico?v=2". Поисковики обновляют иконку по собственному графику.
Что такое maskable-иконка?
Иконка, нарисованная с дополнительными полями, чтобы Android мог обрезать её до круга, скруглённого квадрата или любой другой формы, не задевая логотип. Она объявляется в манифесте с "purpose": "maskable". Без неё Android уменьшает обычную иконку и кладёт её на белый круг.