Favicon (от англ. favorite icon — иконка избранного) — это маленькое изображение, отображающееся во вкладке браузера, закладках, истории посещений и поисковой выдаче рядом с названием сайта.
Что такое favicon в SEO — элемент брендирования и доверия: яркая, узнаваемая иконка повышает запоминаемость сайта в выдаче и кликабельность по сниппету.
Google официально начал показывать favicon в мобильной выдаче с мая 2019 года, в десктопной — с января 2020. Технически favicon представляет собой файл favicon.ico или favicon.png размером от 16×16 до 512×512 пикселей, размещаемый в корне сайта и подключаемый через тег <link rel="icon" href="/favicon.ico">.
Современные сайты создают целый набор иконок разных размеров под разные устройства и платформы: 16, 32, 48 пикселей для браузерных вкладок, 180×180 для iOS, 192×192 и 512×512 для Android, 270×270 для Windows. Отсутствие favicon на сайте не является SEO-проблемой напрямую, но воспринимается алгоритмами и пользователями как сигнал недоработанности сайта.
Что такое favicon
Favicon — графический элемент, который браузеры и поисковики используют для визуальной идентификации сайта в различных интерфейсах. Стандартные места отображения favicon:
- Вкладка браузера рядом с заголовком страницы
- Список закладок и панель быстрого доступа
- История посещений
- Адресная строка (в некоторых браузерах)
- Поисковая выдача Google и Яндекса на мобильных и десктопе
- Системное меню «Поделиться» при отправке ссылки
- Иконка приложения при добавлении сайта на главный экран смартфона
- Уведомления push в браузере
В отличие от логотипа или баннера, favicon работает в очень маленьком размере (типично 16×16 или 32×32 пикселей в реальном отображении), поэтому требует особого подхода к дизайну: упрощённые формы, контрастные цвета, узнаваемость без мелких деталей.
История появления favicon
Favicon был представлен в Internet Explorer 5 в марте 1999 года. Изначальная функция — отметка сайтов, добавленных в «Избранное» браузера. Файл favicon.ico размещался в корне сайта, и при добавлении страницы в закладки IE автоматически забирал этот файл и показывал рядом с записью в списке закладок.
До конца 2010-х favicon оставался преимущественно элементом интерфейса браузера — поисковики не учитывали его в выдаче. Ситуация изменилась в 2019 году: Google добавил favicon в мобильную выдачу, что моментально превратило иконку в элемент SEO и брендирования. С января 2020 года favicon появился и в десктопной выдаче — рядом с названием сайта в синем тексте URL.
Параллельно расширялся стандарт: первые favicon.ico были ограничены 16×16 пикселями, позже добавили 32×32, 48×48, 64×64. С появлением мобильных устройств и операционных систем с высокой плотностью пикселей появились иконки 180×180 (Apple Touch Icon для iOS), 192×192 и 512×512 (Android Chrome). Спецификация Web App Manifest (2014) систематизировала набор иконок через файл manifest.json.
Размеры и форматы favicon
| Размер | Назначение | Формат файла |
|---|---|---|
| 16×16 | Вкладка браузера, поисковая выдача | ICO, PNG |
| 32×32 | Закладки, панель задач, экраны Retina | ICO, PNG |
| 48×48 | Windows-плитки, ярлыки | PNG |
| 180×180 | Иконка для добавления на главный экран iOS (Apple Touch Icon) | PNG |
| 192×192 | Android Chrome — иконка приложения | PNG |
| 270×270 | Windows-плитки на Start Menu (msapplication-TileImage) | PNG |
| 512×512 | Android Chrome — иконка высокого разрешения, PWA | PNG |
| Векторный (SVG) | Универсальный favicon, масштабируемый под любой размер | SVG |
Формат ICO — исторически основной формат favicon, поддерживается всеми браузерами. Преимущество — возможность хранить несколько разрешений в одном файле (16, 32, 48, 64 в одном favicon.ico). Недостаток — устаревший формат, не поддерживает прозрачность так же хорошо, как PNG. Само название «favicon» — сокращение от favorite icon (иконка избранного), что отражает изначальную функцию: маркировка добавленных в закладки сайтов. Современная роль favorite icon вышла далеко за рамки закладок, но название сохранилось.
Формат PNG — рекомендуемый современный формат для favicon. Поддерживает прозрачный фон, лучшее сжатие, нет ограничений размера. Минус — нужно создавать отдельный файл для каждого размера или использовать SVG.
Формат SVG — векторный формат, поддерживается в современных браузерах с 2020 года. Один файл масштабируется под любой размер без потери качества. На 2024 год около 90% активной аудитории поддерживает SVG-favicon, но для совместимости со старыми браузерами часто используется fallback на PNG.
Как подключить favicon к сайту
Минимальный вариант подключения — разместить файл favicon.ico в корне сайта (/favicon.ico). Браузеры автоматически запрашивают этот файл при загрузке любой страницы и отображают, если файл существует.
Современный подход — явное подключение через теги <link> в секции <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">Файл site.webmanifest содержит описание иконок для PWA и Android Chrome:
{
"name": "Cropas",
"short_name": "Cropas",
"icons": [
{"src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png"},
{"src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png"}
],
"theme_color": "#1f2328",
"background_color": "#ffffff",
"display": "standalone"
}Готовые наборы favicon генерируют сервисы: realfavicongenerator.net (популярный западный сервис), favicon.io (простой генератор с конвертацией из текста или эмодзи), Genfavicon, Favicon Generator от RealFaviconGenerator. Сервис принимает исходное изображение 512×512 и выдаёт полный архив с файлами всех размеров плюс готовый HTML-код для вставки.
Favicon в поисковой выдаче
В Google favicon отображается:
- Мобильная выдача. Слева от ссылки на сайт, размер 16×16 пикселей с учётом плотности экрана.
- Десктопная выдача. С 14 января 2020 года — рядом с названием сайта в URL над основной ссылкой.
- Google News. В блоке «Топ новостей» — рядом с названием источника.
- Discover (мобильный фид). В рекомендательной ленте Google Discover на Android.
В Яндексе favicon показывается в десктопной и мобильной выдаче рядом с названием сайта в синем тексте URL. Дополнительно — в Яндекс.Картинках при наведении на превью, в блоке «Колдунщиков» (быстрые ответы) для коммерческих сайтов.
Требования Google для favicon в выдаче:
- Размер не меньше 8×8 пикселей
- Должен быть кратен 48 пикселям (48×48, 96×96, 144×144) для лучшего отображения на экранах разной плотности
- Подключение через тег
<link rel="icon">или<link rel="shortcut icon"> - Файл должен быть доступен по HTTP/HTTPS без перенаправлений
- Не должен содержать оскорбительный или вводящий в заблуждение контент
- Не должен быть идентичным favicon другого сайта (Google автоматически заменяет копии на собственную иконку-заглушку с буквой)
Современный набор иконок для разных устройств
Полный набор для коммерческого сайта в 2024 году:
- favicon.ico — мультиразрешный ICO-файл с 16×16, 32×32, 48×48 для максимальной совместимости со старыми браузерами
- favicon-16×16.png и favicon-32×32.png — стандартные иконки для современных браузеров
- apple-touch-icon.png 180×180 — иконка для добавления на главный экран iPhone и iPad
- android-chrome-192×192.png и android-chrome-512×512.png — иконки для Android Chrome и PWA
- mstile-150×150.png — плитка для Microsoft Edge и Windows Start Menu
- safari-pinned-tab.svg — векторная иконка для закреплённых вкладок Safari (одноцветная)
- site.webmanifest — манифест для PWA с описанием всех иконок
- browserconfig.xml — конфиг для Microsoft Edge и Internet Explorer
Минимальный набор для небольшого сайта — favicon.ico плюс apple-touch-icon.png 180×180. Полный набор обязателен для PWA, корпоративных сайтов с премиум-аудиторией, e-commerce с акцентом на мобильную аудиторию.
Типичные ошибки
| Ошибка | Последствие |
|---|---|
| Отсутствие favicon на сайте | В выдаче и закладках вместо иконки — пустой квадрат, снижение доверия и узнаваемости |
| Использование favicon с прозрачным фоном на тёмной теме браузера | Иконка сливается с фоном, становится невидимой |
| Слишком сложный favicon с мелкими деталями | В размере 16×16 теряется читаемость, иконка превращается в неразборчивое пятно |
| Использование текстового favicon с длинной аббревиатурой | 3–4 буквы — максимум для разборчивости в маленьком размере |
| Favicon не обновляется в браузерах | Браузеры агрессивно кешируют favicon, для обновления нужно добавить версию через query string: /favicon.ico?v=2 |
| Размещение favicon только в одном размере 16×16 | Плохое отображение на Retina-экранах, мобильных, PWA |
| Использование чужого favicon (логотипа конкурента, бренда) | Нарушение авторских прав, риск ручных санкций Google |
Часто задаваемые вопросы
Влияет ли favicon на ранжирование?
Прямо — нет, favicon не входит в факторы ранжирования. Косвенно — да, через CTR в выдаче: яркая узнаваемая иконка повышает кликабельность сниппета на 1–5%. Кроме того, отсутствие favicon воспринимается алгоритмами и пользователями как сигнал недоработанности сайта, что снижает общее доверие и долгосрочные SEO-показатели.
Какой размер favicon оптимален в 2024 году?
Минимум — 32×32 PNG плюс 180×180 для Apple Touch Icon. Оптимум — полный набор от 16×16 до 512×512 с разметкой через manifest.json. Универсальный SVG-favicon — современный подход, работает в большинстве актуальных браузеров и масштабируется под любой размер. Для максимальной совместимости со старыми браузерами всё ещё добавляют favicon.ico как fallback.
Как обновить favicon, если в браузере отображается старый?
Браузеры агрессивно кешируют favicon — иногда на недели. Решение: добавить версию через query string в подключении: <link rel="icon" href="/favicon.ico?v=2">. При следующем обновлении номер версии увеличивается. Альтернатива — переименовать файл (favicon-v2.ico) и обновить ссылку. Третий способ — попросить пользователя очистить кеш браузера (Ctrl+Shift+Delete).
Где правильно размещать favicon — в корне сайта или в подпапке?
Технически — где угодно, главное правильно указать путь в теге <link>. На практике стандарт — корневая папка сайта (/favicon.ico). Это обеспечивает автоматическое обнаружение браузерами и поисковиками даже без явного подключения через HTML.
Что делать, если Google показывает в выдаче не наш favicon, а заглушку с первой буквой?
Google заменяет favicon на заглушку, если иконка не соответствует требованиям: слишком маленькая, недоступна по прямой ссылке, идентична иконке другого сайта, нарушает контентные правила (оскорбительный контент). Проверка: открыть /favicon.ico напрямую в браузере, убедиться в доступности и корректности. После исправления переиндексация и обновление в выдаче занимает 1–4 недели.
Можно ли использовать эмодзи как favicon?
Технически да — некоторые сервисы (favicon.io, emojicon) генерируют favicon из эмодзи. Для серьёзных коммерческих сайтов не рекомендуется: эмодзи отображаются по-разному в разных операционных системах (Apple, Google, Microsoft рисуют их в собственном стиле), плюс эмодзи плохо передают брендовую идентичность. Для личных блогов, тестовых проектов, временных лендингов — приемлемо.
Нужен ли favicon для одностраничного сайта или лендинга?
Да, обязательно. Даже на одностраничном сайте favicon отображается во вкладке браузера, в закладках, в поисковой выдаче. Отсутствие иконки на коммерческом лендинге — сигнал недоработанности, снижающий доверие посетителей и конверсию на 1–3%. Создание минимального favicon занимает 10–15 минут через генератор и обходится бесплатно.
