Как сделать favicon
Размеры, форматы и код, которые нужны favicon, чтобы он показывался везде.
Favicon это маленькая иконка во вкладке браузера, в закладках и рядом с вашим сайтом в мобильных результатах Google. Без favicon сайт выглядит незаконченным, а с размытым выглядит ещё хуже. Сделать хороший можно за несколько минут.
Начните с правильной картинки
Favicon показывается размером всего 16 на 16 пикселей, поэтому полный логотип с надписью будет нечитаем. Используйте простой знак: символ из логотипа, одну букву или смелую фигуру в фирменном цвете. Проверьте, уменьшив его на экране вчетверо: если всё ещё понятно, что это, он подойдёт.
Начните с квадратного изображения минимум 512 на 512 пикселей, лучше PNG с прозрачным фоном. Если логотип не квадратный, обрежьте его до квадрата с зафиксированными пропорциями 1:1.
Какие файлы нужны
| Файл | Размер | Кто использует |
|---|---|---|
| favicon.ico | Содержит версии 16, 32 и 48 пикселей | Браузеры, старые системы, стандартный запрос /favicon.ico |
| Иконка PNG | 32 на 32 и 192 на 192 | Современные браузеры, главные экраны Android |
| apple-touch-icon.png | 180 на 180 | Закладки на главном экране iPhone и iPad |
Google Поиск тоже показывает ваш favicon в результатах. Он должен быть квадратным, не меньше 48 на 48 пикселей и доступным для сканирования на вашем сайте.
Как сделать файл ICO
Перетащите квадратный PNG в конвертер PNG в ICO. Он создаст настоящий файл .ico с маленькими размерами, которые запрашивают браузеры. Для версий PNG измените размер того же квадратного изображения до 180, 192 и 32 пикселей.
Как добавить его на сайт
Загрузите favicon.ico в корень сайта, чтобы он открывался по адресу вашсайт.ru/favicon.ico, и добавьте эти строки внутрь head ваших страниц:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/ru/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/ru/apple-touch-icon.png">
В WordPress зайдите в «Внешний вид», «Настроить», «Свойства сайта» и загрузите квадратное изображение как «Значок сайта»; WordPress сам создаст размеры. В Shopify, Wix и Squarespace есть настройка favicon в параметрах сайта или темы.
Когда новый favicon не появляется
Браузеры упорно кэшируют favicon. Откройте сайт в приватном окне или зайдите прямо на вашсайт.ru/favicon.ico и обновите страницу. Google может обновлять иконку в результатах поиска дни или недели, после того как заново просканирует главную страницу.
Частые ошибки
- Полный логотип с мелким текстом, который на 16 пикселях превращается в пятно.
- Белая иконка на прозрачном фоне, которая исчезает на светлых вкладках браузера.
- Только крошечный файл на 16 пикселей, который размыт на экранах высокого разрешения.
- Отсутствие файла по адресу /favicon.ico, который некоторые браузеры и роботы запрашивают независимо от того, что указано на странице.