Фавикон (от англ. favorites icon — «значок для избранного») — это иконка сайта в браузере, которая отображается на вкладках, в закладках и поисковой выдаче. Если отвечать на вопрос, что такое фавикон коротко: это визуальный идентификатор ресурса размером от 16×16 до 512×512 пикселей. Напрямую на ранжирование он не влияет, но качественный favicon для сайта повышает кликабельность (CTR) сниппета на 5–12 % за счет узнаваемости бренда и выделения среди конкурентов. Это один из самых недооцененных инструментов работы с поведенческими факторами.
- Где отображается фавикон
- Для чего нужен фавикон: SEO и брендинг
- Размер фавикона: какие картинки подбирать
- Как сделать фавикон для сайта самостоятельно
- Как правильно добавить фавикон в код сайта
- SVG — современный стандарт
- Настройка через manifest.json для PWA
- Добавление в популярных CMS
- Как проверить фавикон и почему он не отображается в «Яндексе»
- FAQ по инконке сайта
Где отображается фавикон
Разберем, где именно пользователь видит этот небольшой графический элемент. Мест размещения несколько:
- На открытых вкладках любого браузера.
Из множества открытых вкладок он поможет «выхватить» взглядом нужную - В закладках браузера, рядом с названием страницы.
Функция — помочь пользователю найти нужную страницу быстрее - В качестве ярлыка на экране смартфона.
Если пользователь вынес сайт на рабочий стол - В разделе «История» веб-обозревателя.
Чтобы увидеть фавикон, придется зайти в настройки - В поисковой выдаче «Яндекса». Значки отображаются слева от заголовка на сниппете и делают ресурс узнаваемым. Если у проекта нет своей картинки, рядом со сниппетом появится стандартный логотип CMS, на которой работает система.
Например, значок WordPress - В мобильной выдаче Google. В мобильной SERP иконка показывается стабильно. Для десктопа поведение алгоритмов периодически меняется (поисковик тестирует дизайн), поэтому актуальный статус отображения проверяйте в справке Google Search Central.
Так выглядят сайты в мобильной выдаче Google
Помимо глобальной настройки, отдельные изображения задают для конкретных разделов. Например, в SPA-приложениях это делают через тег <link rel="icon" href="/section/favicon.ico">, который перекрывает корневой файл.
Для чего нужен фавикон: SEO и брендинг
Прямого влияния на ранжирование сайтов фавиконка не оказывает. Документация Google Search Central подтверждает: это не фактор ранжирования. Однако косвенно, через поведенческие метрики, она улучшает видимость бизнеса в поиске. По данным исследования Ahrefs, проекты с кастомными значками получают прирост кликабельности до 12%.
Простая логика: если ресурс легко найти в выдаче, истории или среди десятка открытых вкладок — вероятность возврата пользователя возрастает. Поисковые системы фиксируют этот позитивный сигнал.
Выделим 4 главных плюса внедрения:
- Рост CTR. Проект становится заметнее в выдаче «Яндекса» и Google.
- Запоминаемость. Грамотно подобранный дизайн работает на айдентику бренда.
- Навигация. Человеку проще найти нужный URL в закладках и избранном.
- Доверие. Наличие детализированной иконки показывает, что разработчики позаботились об UX (пользовательском опыте).
Размер фавикона: какие картинки подбирать
При разработке учитывают, какого размера фавикон потребуется для разных устройств. На мобильных экранах это всего 16×16 пикселей, поэтому важна идеальная читаемость. Чтобы графика выглядела современно и релевантно, соблюдайте базовые правила дизайна.
1. Ассоциативность с брендом
Подбирайте изображение по тематике: собака для зоомагазина или зеленый росток для агро-тематики. Это формирует моментальную связь с продуктом.
Иногда для привлечения внимания используют стрелки, не связанные с логотипом. В теории это привлекает взгляд к сниппету...
На практике такой подход ломает навигацию и мешает запомнить компанию.
%201.png)
%201.png)
%201.png)
%201.png)
%201.png)
2. Яркость и контраст
Пастельные тона и сложные градиенты сливаются с фоном браузера. Яркий цвет дает больше шансов на клик.
3. Отсутствие мелких деталей
При миниатюрном отображении цветовой хаос или мелкий текст превращаются в нечитаемое пятно. Оставьте 1–2 элемента и максимум 3 цвета.
4. Статичность и форма
Анимированные GIF не используются в поисковой выдаче — роботы обрабатывают только статичные форматы (PNG, SVG). Исходник должен быть строго квадратным, иначе генераторы исказят пропорции.
Матрица размеров фавиконов (2026)
Разные платформы запрашивают определенные габариты. Используйте эту сводную таблицу при подготовке файлов:
| Размер (пикселей) | Платформа / контекст | Рекомендуемый формат |
|---|---|---|
| 16×16 | Вкладки браузера (базовый) | ICO, PNG |
| 32×32 | Закладки, Windows ярлыки | ICO, PNG |
| 48×48 | Google SERP (минимальный кратный 48) | PNG, SVG |
| 96×96 | Google SERP (Retina) | PNG, SVG |
| 120×120 | Яндекс (рекомендуемый) | PNG, SVG |
| 180×180 | Apple Touch Icon (iPhone/iPad) | PNG |
| 192×192 | Android Chrome, PWA | PNG |
| 512×512 | PWA splash screen, AMP-страницы | PNG |
| Любой (вектор) | Современные браузеры (Chrome 109+, Firefox 97+) | SVG |
Сравнение форматов (2026)
От расширения зависит качество картинки на Retina-экранах и вес страницы:
| Формат | Поддержка браузерами | Яндекс / Google | Особенности и рекомендации |
|---|---|---|---|
| ICO | Все | Да / Да | Лучший выбор для обратной совместимости. Хранит несколько разрешений в одном файле. |
| PNG | Все | Да / Да | Предпочтительный стандарт. Поддерживает прозрачность, дает отличную четкость. |
| SVG | 98.5% (современные) | Да / Да | Оптимален для dark mode. Весит на 70% меньше ICO, масштабируется без потери качества. |
| GIF | Все | Да / Да | Только статичный вариант. Анимация игнорируется поисковиками. |
| JPEG / BMP | Все | Да / Частично | Не рекомендуются. Нет прозрачности, устаревшие технологии сжатия. |
Требования «Яндекса»
Отечественный поисковик поддерживает размеры 16×16, 32×32 и 120×120. Рекомендуется загружать именно 120×120 — так графика в сервисах «Яндекса» выглядит максимально четко. Допустимые форматы: SVG, ICO, PNG, GIF, JPEG. Если сервер временно недоступен, система покажет закэшированную версию (кэш обновляется до 7 дней). Подробности описаны в «Яндекс Справке».
Требования Google
Google требует использовать стороны, кратные 48 пикселям (48×48, 96×96, 144×144). Загружать 16×16 технически можно, но алгоритмы это не приветствуют. Иконка выводится рядом с URL. Главное требование — визуальное совпадение с общим стилем бренда.
Как сделать фавикон для сайта самостоятельно
Создание favicon не требует навыков программирования. В сети работают десятки онлайн-генераторов, которые из одной исходной картинки делают готовый архив под все устройства.
Базовый шаг: в корневой каталог загружают favicon.ico. Это контейнер, внутри которого зашито несколько разрешений. Такой подход сокращает количество HTTP-запросов к серверу.
Проверенные инструменты для генерации:
- Генератор от PR-CY. Простой русскоязычный сервис. Быстро выдает архив с файлом ICO нужных габаритов.
Сервис простой и совершенно бесплатный - Faviconit. Бесплатный инструмент. Принимает исходники от 310×310 px весом до 5 МБ. Выдает не только графику, но и текстовый документ с HTML-разметкой.
Помимо набора картинок, сервис выдает текстовый файл с кодом для загрузки на сайт. - RealFaviconGenerator. Мощная англоязычная платформа. Генерирует полный пакет для iOS, Android, Windows и PWA. Сразу формирует корректный код для вставки в секцию
<head>.
Как правильно добавить фавикон в код сайта
Получить файлы недостаточно — их необходимо интегрировать. Код прописывается строго внутри тега <head> на каждой странице. Иначе браузер не поймет, откуда тянуть графику.
Минимальный код подключения
Этого набора хватит для 90% стандартных проектов:
<!-- Основной фавикон для браузеров -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- PNG для современных браузеров -->
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<!-- SVG — предпочтительный формат -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Apple Touch Icon для iOS и macOS Safari -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">Расширенный код (PWA и Dark Mode)
Применяется для сложных веб-приложений с поддержкой темной темы:
<!-- Базовые форматы -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Apple устройства -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<!-- Манифест для Android и PWA -->
<link rel="manifest" href="/site.webmanifest">SVG — современный стандарт
В 2026 году векторный формат SVG стал индустриальным стандартом. Главный плюс: один легкий файл заменяет десяток тяжелых PNG. Кроме того, вектор позволяет настроить смену цвета при переключении пользователя на темную тему (Dark Mode).
%201.png)
Пример адаптации под темную тему
Внутрь исходника добавляется CSS-правило @media (prefers-color-scheme: dark). Система сама перекрасит элементы:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.icon-bg { fill: #ffffff; }
.icon-fg { fill: #1a73e8; }
@media (prefers-color-scheme: dark) {
.icon-bg { fill: #1e1e1e; }
.icon-fg { fill: #8ab4f8; }
}
</style>
<rect class="icon-bg" width="100" height="100" rx="20"/>
<text class="icon-fg" x="50" y="72" font-size="60" text-anchor="middle" font-family="sans-serif">K</text>
</svg>Настройка через manifest.json для PWA
Если ресурс работает как прогрессивное веб-приложение (PWA), требуется файл site.webmanifest. Он указывает Android, какую графику использовать при установке ярлыка на рабочий стол.
{
"name": "Название компании",
"short_name": "Бренд",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Директива purpose: "maskable" обязательна. Она позволяет операционной системе обрезать края под нужную форму (круг, квадрат, капля). Важный нюанс: логотип должен находиться в центральных 72% площади, чтобы избежать случайной обрезки.
Управление кэшем. Браузеры кэшируют статику на срок до года (заголовок Cache-Control: max-age=31536000). Чтобы принудительно обновить дизайн у всех пользователей, используйте версионирование в URL:
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">Добавление в популярных CMS
Если доступа к исходному коду нет, загрузить графику можно через панель управления движком:
| CMS / Конструктор | Путь в настройках | Рекомендуемый формат |
|---|---|---|
| WordPress | Внешний вид → Настройка → Свойства сайта → Иконка | PNG 512×512 (система сама нарежет нужные копии) |
| 1C-Битрикс | Настройки → Настройки продукта → Сайты → редактирование → вкладка «Иконка» | ICO, PNG 32×32 |
| Tilda | Настройки сайта → Иконка (Favicon) | PNG, ICO (32×32) |
| Wix | Редактор → Меню → Настройки → Фавикон | PNG, ICO |
Как проверить фавикон и почему он не отображается в «Яндексе»
Чтобы проверить фавикон на сайте и понять, как его видят поисковые роботы, используйте прямые запросы к серверам ПС:
- Проверить фавикон в «Яндексе». Введите в адресную строку: https://favicon.yandex.net/favicon/имя_домена
Все в порядке. - В Google. Используйте URL: https://www.google.com/s2/favicons?domain=имя_домена
Результат выглядит очень похоже
Частые ошибки и решения
Если не отображается фавикон в «Яндексе» или Chrome, сверьтесь с таблицей диагностики:
| Проблема | Причина | Решение |
|---|---|---|
| Пустой квадрат в браузере | Отсутствует favicon.ico в корне или нет тега <link> |
Загрузите файл в корневую директорию и пропишите путь в <head> |
| Не видно в «Яндексе» | Блокировка в файле robots.txt | Добавьте директиву Allow: /favicon.ico |
| Отображается старый дизайн | Жесткое кэширование на стороне клиента | Добавьте параметр версии ?v=2 к ссылке. Сбросьте кэш (Ctrl+F5) |
| Размытость на смартфонах | Загружен только размер 16×16 | Добавьте PNG 192×192 или перейдите на векторный SVG |
| Чужой логотип в выдаче | Поисковик подтянул стандартный значок CMS | Проверьте корректность путей в коде и доступность картинки по прямому URL |
Чек-лист перед релизом
- Упростите дизайн: уберите мелкий текст, оставьте 1–2 контрастных цвета.
- Сделайте исходник строго квадратным.
- Сгенерируйте PNG-набор: 32×32, 96×96, 180×180, 192×192, 512×512.
- Подготовьте SVG-версию с поддержкой темной темы.
- Пропишите теги
<link rel="icon">в секции<head>. - Для PWA настройте
site.webmanifestс параметромpurpose: maskable. - Убедитесь, что графика открыта для индексации в robots.txt.
- Протестируйте результат через сервисы «Яндекса» и Google.
FAQ по инконке сайта
Влияет ли фавикон на SEO и позиции в поиске?
Напрямую — нет. Google официально не включает этот элемент в список факторов ранжирования. Однако он косвенно влияет на SEO через показатель кликабельности (CTR). Качественная графика привлекает внимание, пользователи чаще переходят по ссылке, что улучшает поведенческие метрики и в перспективе повышает позиции.
Какой размер оптимален?
Для закрытия всех технических требований нужен набор: 32×32 (вкладки), 96×96 (Google SERP), 120×120 (Яндекс), 180×180 (Apple) и 512×512 (Android/PWA). Если внедрить SVG, он закроет большинство потребностей благодаря бесконечному масштабированию.
Какой формат выбрать: ICO, PNG или SVG?
Для новых проектов рекомендуем связку: SVG как основной формат (поддерживает смену тем, мало весит) + PNG 96×96 + классический ICO в корне сервера для старых версий браузеров.
Почему фавикон не отображается в «Яндексе»?
Самая частая причина — запрет на сканирование в файле robots.txt (директива Disallow). Также проблема кроется в неверном синтаксисе тега link или долгом обновлении кэша поисковика (занимает до 7 дней). Начните диагностику с проверки доступности по прямому URL.
Как добавить фавикон без доступа к коду сайта?
Используйте встроенные инструменты вашей CMS. В WordPress это делается через меню «Внешний вид» → «Настройка» → «Свойства сайта». В Tilda — через общие настройки проекта. Достаточно загрузить один качественный PNG 512×512, а система сама сгенерирует нужные копии.
Нужен ли отдельный фавикон для мобильных устройств?
Да. Операционные системы iOS и Android требуют специфических настроек. Для iPhone прописывается тег apple-touch-icon, а для Android данные передаются через файл манифеста с указанием адаптивных иконок (maskable).
Как обновить фавикон, если браузеры показывают старую версию?
Браузеры агрессивно кэшируют статику. Чтобы заставить их скачать новый файл, измените путь в коде, добавив параметр версии: например, favicon.svg?v=2. Для локальной проверки нажмите комбинацию Ctrl+F5 (Windows) или Cmd+Shift+R (Mac).
.png)
.png)
.png)
Комментарии (6)
Оставить комментарий