Фавиконы: размеры, форматы и HTML-теги
Фавикон — маленький файл, но браузеры, телефоны и установленные веб-приложения ищут разные размеры. В этом руководстве объясняется, какие файлы нужны сайту, как объявить их в HTML и как создать значок, который останется читаемым при размере 16 пикселей.
Что такое фавикон
Фавикон (от английского «favourites icon» — «значок избранного») — это небольшое изображение, по которому сайт узнают во вкладках, закладках и истории просмотров. Телефоны используют увеличенную версию, когда сайт добавляют на главный экран, установленные веб-приложения берут значки из своего манифеста, а некоторые поисковые системы показывают фавикон рядом с результатами. Поскольку в этих местах используются разные размеры, сайт обычно предоставляет небольшой набор файлов.
Фавиконы ICO, PNG и SVG
| Формат | Что содержит | Что нужно знать |
|---|---|---|
ICO (favicon.ico) |
Несколько размеров в одном файле, часто 16, 32 и 48 пикселей | Самый старый формат. Многие браузеры запрашивают /favicon.ico из корня сайта, даже если страница на него не ссылается, поэтому он полезен как запасной вариант. |
| PNG | Один размер на файл, с прозрачностью | Объявляется с атрибутом sizes, чтобы браузер мог выбрать подходящий файл. Используется также для Apple Touch Icon и значков манифеста. |
| SVG | Векторный рисунок, который масштабируется до любого размера | Поддерживается большинством современных настольных браузеров, но не всеми, поэтому сохраните и файлы ICO или PNG. SVG-фавикон может подстраиваться под тёмную тему с помощью CSS. |
Файл ICO — это небольшой контейнер: заголовок перечисляет все изображения с их размерами и положением, а сами изображения могут храниться как данные PNG. Генератор фавиконов LeedyBox создаёт favicon.ico с изображениями PNG размером 16, 32 и 48 пикселей, а также файлы PNG для остальных размеров.
Распространённые размеры и где они используются
| Размер (пиксели) | Типичный файл | Типичное применение |
|---|---|---|
| 16 × 16 | favicon-16x16.png, внутри favicon.ico | Вкладки и закладки на обычных экранах |
| 32 × 32 | favicon-32x32.png, внутри favicon.ico | Вкладки на экранах высокой плотности, некоторые ярлыки |
| 48 × 48 | внутри favicon.ico | Более крупные ярлыки и значки на рабочем столе в некоторых системах |
| 180 × 180 | apple-touch-icon.png | Значок на главном экране iPhone и iPad |
| 192 × 192 | android-chrome-192x192.png | Значок на главном экране Android, указывается в манифесте |
| 512 × 512 | android-chrome-512x512.png | Диалоги установки и заставки веб-приложений |
Начинайте с квадратного исходника размером не менее 512 × 512 пикселей или с файла SVG. Маленький исходник придётся увеличивать для крупных значков, и он будет выглядеть размытым. К неквадратному логотипу нужно добавить поля или обрезать его.
Apple Touch Icon не должен быть прозрачным: некоторые устройства Apple показывают прозрачные области чёрными. Вместо этого залейте фон цветом. iPhone и iPad сами скругляют углы, поэтому файл может быть обычным квадратом. Об альфа-каналах подробнее — в руководстве о прозрачности в PNG и JPG.
HTML-теги и манифест веб-приложения
Поместите файлы в корневую папку сайта и добавьте эти теги внутрь <head> каждой страницы:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Если у вас есть и SVG-фавикон, добавьте <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Манифест (site.webmanifest) — это небольшой файл JSON с названием сайта, кратким названием, значками размером 192 и 512 пикселей, цветом темы, цветом фона и режимом отображения, например standalone. Если файлы лежат в другой папке, измените все пути в тегах и в манифесте.
Дизайн для крошечных размеров
- Упрощайте. При 16 пикселях тонкие линии, мелкий текст и мелкие детали превращаются в размытое пятно. Упрощённый знак, одна фигура или одна-две буквы работают лучше, чем полный логотип со слоганом.
- Используйте сильный контраст. Явная разница в яркости между значком и его фоном важнее точных фирменных цветов.
- Делайте минимальные отступы. Пустое пространство уменьшает видимую часть значка. Небольшое поле может пойти на пользу крупным значкам, но маленькие фавиконы легче узнать, когда они занимают бо́льшую часть квадрата.
- Проверяйте реальный размер. Смотрите на значок во вкладке при масштабе 100%, а не только на увеличенном предпросмотре.
Тёмные темы браузера
Многие пользуются тёмной панелью вкладок. Тёмный логотип на прозрачном фоне может там почти исчезнуть, а белый — потеряться в светлой теме. Распространённые решения — сплошная или скруглённая подложка за логотипом, светлый контур или SVG-фавикон, который меняет цвета с помощью медиазапроса prefers-color-scheme (там, где SVG-фавиконы поддерживаются). Генератор LeedyBox показывает светлую и тёмную панели вкладок, чтобы вы могли сравнить оба варианта.
Обновление фавикона и кеш браузера
Браузеры хранят фавиконы в кеше, иногда долго, поэтому новый значок может появиться не сразу после загрузки. Принудительное обновление страницы или приватное окно могут показать новую версию. Чтобы вернувшиеся посетители скорее получили новый значок, измените имя файла или добавьте версию к URL в тегах, например /favicon-32x32.png?v=2. Значки в закладках и результатах поиска могут обновляться дольше. После любых изменений проверьте результат в тех браузерах и на тех устройствах, которые для вас важны.
Часто задаваемые вопросы
Нужен ли ещё favicon.ico?
Он не обязателен, но это простой запасной вариант: многие браузеры и другие инструменты ищут /favicon.ico в корневой папке сайта. Он занимает всего несколько килобайт.
Можно ли использовать JPG в качестве фавикона?
Обычно браузеры могут его показать, но в JPG нет прозрачности, а сжатие может размыть мелкие детали. Для значков лучше подходят файлы PNG, ICO или SVG.
Почему не отображается мой новый фавикон?
Чаще всего старый значок ещё хранится в кеше или пути в HTML-тегах не совпадают с тем, куда загружены файлы. Откройте URL каждого файла прямо в браузере и проверьте, загружается ли он.