Загрузка...
Загрузка...
Полное руководство по favicon. Форматы ICO, PNG, SVG. Разметка в HTML, поддержка браузеров, генерация. Практические рекомендации для веб-разработчиков.
Полный список размеров favicon для всех платформ. Apple Touch Icon, Android, Windows, PWA. Таблицы и разметка для полной совместимости.
УтилитыПолное руководство по Base64: принцип работы, применение в вебе, плюсы и минусы. Кодирование изображений, Data URI, ограничения.
УтилитыПрактическое руководство по оптимизации SVG: удаление метаданных, упрощение путей, минификация. Инструменты и приёмы для веб-разработчиков.
УтилитыРуководство по URL encoding: encodeURIComponent, encodeURI, разница между ними. Спецсимволы, пробелы, кириллица — когда и как кодировать.
Поделитесь с коллегами или изучите другие материалы блога
Favicon — иконка сайта во вкладке браузера, закладках и истории. Небольшой элемент, но он влияет на узнаваемость и профессионализм. В этом руководстве разберём форматы, разметку HTML и практические рекомендации. Создать favicon из изображения можно в Favicon Generator на reChecker. Подробнее о размерах для разных платформ — в статье Все размеры favicon в 2026.
Favicon (favorite icon) — маленькое изображение, ассоциированное с сайтом. Отображается во вкладке браузера, закладках, панели избранного, в результатах поиска (в некоторых случаях). Стандарт де-факто — 16×16 или 32×32 пикселя для вкладки, но современные устройства требуют больше размеров.
Исторический формат, созданный для иконок Windows. Поддерживает несколько размеров в одном файле (16×16, 32×32, 48×48). Все браузеры понимают ICO.
Преимущества: один файл для нескольких размеров, широкая поддержка. Недостатки: устаревший формат, ограниченное качество, плохая поддержка прозрачности в старых версиях.
Структура ICO: заголовок файла, затем массив записей с заголовками изображений (размер, смещение), затем сами изображения в формате BMP или PNG. Мультиразмерный ICO содержит несколько таких записей.
Экспериментально некоторые браузеры начинают поддерживать WebP и AVIF для favicon. Пока не рекомендуется как основной формат — приоритет у ICO и PNG. Следите за обновлениями поддержки.
Современная альтернатива. Один PNG — один размер. Поддержка прозрачности (альфа-канал). Рекомендуемые размеры: 16×16, 32×32, 48×48. Все современные браузеры поддерживают PNG favicon.
Преимущества: качество, прозрачность, простота. Недостатки: нужен отдельный файл на каждый размер (или один крупный, который браузер масштабирует).
Векторный формат. Масштабируется без потери качества. Идеален для простых иконок. Поддержка: все современные браузеры (Chrome, Firefox, Safari, Edge).
Преимущества: один файл для всех размеров, чёткость на Retina. Недостатки: не подходит для сложных изображений, Safari добавил поддержку относительно недавно — проверяйте на целевых версиях.
Анимированный favicon. Поддерживается в Firefox и частично в других браузерах. Редко используется из-за ограниченной поддержки и отвлекающего эффекта.
<link rel="icon" href="/favicon.ico" sizes="any">
Файл favicon.ico в корне сайта подхватывается браузерами автоматически, даже без тега link. Явный тег даёт контроль над типами и размерами.
<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.
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Один файл покрывает все разрешения. Убедитесь, что SVG оптимизирован и не содержит тяжёлых эффектов.
Для 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">
Или используйте хеш содержимого. Иначе пользователи могут видеть старую иконку неделями.
Для 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 на домашний экран.
Исходное изображение должно быть минимум 512×512 пикселей, лучше — квадрат. Из него генерируются все нужные размеры. Favicon Generator на reChecker создаёт полный пакет: ICO, PNG разных размеров, Apple Touch Icon.
Рекомендации для исходника:
Полный список размеров для всех платформ — в статье о размерах favicon в 2026. Создать favicon можно в Favicon Generator на reChecker.
Поисковые системы не используют favicon напрямую в алгоритмах ранжирования. Однако иконка отображается в результатах поиска (вкладки браузера, закладки) и влияет на CTR — узнаваемый бренд привлекает больше кликов. Отсутствующий или битый favicon может указывать на технические проблемы сайта. Проверка favicon входит в технический аудит reChecker.
SVG favicon должен быть минимальным. Удалите лишние метаданные, группы, эффекты. Оптимизаторы (SVGO, svgo) сокращают размер. Проверьте, что SVG не содержит внешних ресурсов (шрифты, изображения) — они могут не загрузиться в контексте favicon.
Некоторые сайты используют разные иконки для подразделов (блог, магазин). Укажите rel="icon" с атрибутом sizes в <head> конкретной страницы. Браузер выберет подходящий. Для большинства сайтов одна иконка достаточна.
Если favicon не отображается:
image/x-icon для ICO, image/png для PNG?v=2 к URLlink в <head>, до закрывающего </head>Favicon — небольшой, но важный элемент идентичности сайта. Минимальный набор: ICO или PNG 32×32, Apple Touch Icon 180×180. Для PWA добавьте 192×192 и 512×512. Используйте Favicon Generator для создания полного пакета.