Favicon — иконка сайта во вкладке браузера, закладках и истории. Небольшой элемент, но он влияет на узнаваемость и профессионализм. В этом руководстве разберём форматы, разметку HTML и практические рекомендации. Создать favicon из изображения можно в Favicon Generator на reChecker. Подробнее о размерах для разных платформ — в статье Все размеры favicon в 2026.
Что такое favicon
Favicon (favorite icon) — маленькое изображение, ассоциированное с сайтом. Отображается во вкладке браузера, закладках, панели избранного, в результатах поиска (в некоторых случаях). Стандарт де-факто — 16×16 или 32×32 пикселя для вкладки, но современные устройства требуют больше размеров.
Форматы favicon
ICO
Исторический формат, созданный для иконок Windows. Поддерживает несколько размеров в одном файле (16×16, 32×32, 48×48). Все браузеры понимают ICO.
Преимущества: один файл для нескольких размеров, широкая поддержка. Недостатки: устаревший формат, ограниченное качество, плохая поддержка прозрачности в старых версиях.
Структура ICO: заголовок файла, затем массив записей с заголовками изображений (размер, смещение), затем сами изображения в формате BMP или PNG. Мультиразмерный ICO содержит несколько таких записей.
WebP и AVIF для favicon
Экспериментально некоторые браузеры начинают поддерживать WebP и AVIF для favicon. Пока не рекомендуется как основной формат — приоритет у ICO и PNG. Следите за обновлениями поддержки.
PNG
Современная альтернатива. Один PNG — один размер. Поддержка прозрачности (альфа-канал). Рекомендуемые размеры: 16×16, 32×32, 48×48. Все современные браузеры поддерживают PNG favicon.
Преимущества: качество, прозрачность, простота. Недостатки: нужен отдельный файл на каждый размер (или один крупный, который браузер масштабирует).
SVG
Векторный формат. Масштабируется без потери качества. Идеален для простых иконок. Поддержка: все современные браузеры (Chrome, Firefox, Safari, Edge).
Преимущества: один файл для всех размеров, чёткость на Retina. Недостатки: не подходит для сложных изображений, Safari добавил поддержку относительно недавно — проверяйте на целевых версиях.
APNG (Animated PNG)
Анимированный favicon. Поддерживается в Firefox и частично в других браузерах. Редко используется из-за ограниченной поддержки и отвлекающего эффекта.
Базовая разметка HTML
Классический способ (ICO)
<link rel="icon" href="/favicon.ico" sizes="any">Файл favicon.ico в корне сайта подхватывается браузерами автоматически, даже без тега link. Явный тег даёт контроль над типами и размерами.
PNG с указанием размера
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">Браузер выбирает подходящий размер. Для Retina-дисплеев можно добавить 48×48 или 64×64.
SVG
<link rel="icon" type="image/svg+xml" href="/favicon.svg">Один файл покрывает все разрешения. Убедитесь, что SVG оптимизирован и не содержит тяжёлых эффектов.
Apple Touch Icon
Для iOS и iPadOS:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Рекомендуемый размер — 180×180. Подробнее в статье о размерах favicon.
Рекомендуемый набор
Минимальный набор для совместимости:
| Файл | Размер | Назначение |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Браузеры, закладки |
| favicon-16x16.png | 16×16 | Альтернатива ICO |
| favicon-32x32.png | 32×32 | Альтернатива ICO |
| apple-touch-icon.png | 180×180 | iOS, iPadOS |
Расширенный набор добавляет размеры для Android, Windows и т.д. Генераторы вроде Favicon Generator создают полный пакет из одного исходного изображения.
Размещение файлов
Favicon должен быть доступен по абсолютному пути от корня:
/favicon.ico
/favicon-16x16.png
/favicon-32x32.png
/apple-touch-icon.pngИли в поддиректории с указанием в link:
<link rel="icon" href="/assets/icons/favicon.ico">Путь должен быть доступен без редиректов. Проверьте в техническом аудите reChecker — отсутствующий или битый favicon может указывать на проблемы с разметкой.
Кэширование
Favicon кэшируется агрессивно. При смене иконки добавьте версионирование в URL:
<link rel="icon" href="/favicon.ico?v=2">Или используйте хеш содержимого. Иначе пользователи могут видеть старую иконку неделями.
Manifest и PWA
Для PWA (Progressive Web App) иконки задаются в manifest.json:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Размеры 192×192 и 512×512 — стандарт для манифеста. Браузеры используют их при установке PWA на домашний экран.
Типичные ошибки
- Неправильный путь — 404 на favicon засоряет логи и может влиять на восприятие
- Слишком сложная графика — на 16×16 детали не видны, упрощайте
- Отсутствие прозрачности — на тёмных темах браузера белый фон выглядит грубо
- Игнорирование Apple Touch Icon — на iOS без него используется скриншот страницы
- Забытое кэширование — смена favicon не отображается без смены URL
Генерация favicon
Исходное изображение должно быть минимум 512×512 пикселей, лучше — квадрат. Из него генерируются все нужные размеры. Favicon Generator на reChecker создаёт полный пакет: ICO, PNG разных размеров, Apple Touch Icon.
Рекомендации для исходника:
- Квадратный формат
- Простой, узнаваемый символ
- Хороший контраст на малых размерах
- Прозрачный фон для PNG/SVG
Полный список размеров для всех платформ — в статье о размерах favicon в 2026. Создать favicon можно в Favicon Generator на reChecker.
Favicon и SEO
Поисковые системы не используют favicon напрямую в алгоритмах ранжирования. Однако иконка отображается в результатах поиска (вкладки браузера, закладки) и влияет на CTR — узнаваемый бренд привлекает больше кликов. Отсутствующий или битый favicon может указывать на технические проблемы сайта. Проверка favicon входит в технический аудит reChecker.
Оптимизация SVG favicon
SVG favicon должен быть минимальным. Удалите лишние метаданные, группы, эффекты. Оптимизаторы (SVGO, svgo) сокращают размер. Проверьте, что SVG не содержит внешних ресурсов (шрифты, изображения) — они могут не загрузиться в контексте favicon.
Множественные favicon для разных разделов
Некоторые сайты используют разные иконки для подразделов (блог, магазин). Укажите rel="icon" с атрибутом sizes в <head> конкретной страницы. Браузер выберет подходящий. Для большинства сайтов одна иконка достаточна.
Отладка проблем с favicon
Если favicon не отображается:
- Проверьте путь — 404 в Network tab
- Проверьте MIME-тип —
image/x-iconдля ICO,image/pngдля PNG - Очистите кэш браузера или добавьте
?v=2к URL - Убедитесь, что тег
linkв<head>, до закрывающего</head> - Проверьте CORS — при загрузке с другого домена могут быть ограничения
Резюме
Favicon — небольшой, но важный элемент идентичности сайта. Минимальный набор: ICO или PNG 32×32, Apple Touch Icon 180×180. Для PWA добавьте 192×192 и 512×512. Используйте Favicon Generator для создания полного пакета.