Favicon — это маленькая иконка, которая отображается во вкладке браузера, в закладках, в истории и в результатах поиска. Если favicon отсутствует или отображается неправильно — сайт выглядит менее профессионально, а пользователи хуже запоминают его. В 2026 году favicon влияет на узнаваемость бренда и косвенно на CTR в выдаче. В этой статье — как проверить favicon, как его создать и какие форматы использовать.
Что такое favicon
Favicon (favorites icon) — это небольшая иконка, которая идентифицирует сайт. Она отображается:
— во вкладке браузера слева от заголовка страницы;
— в списке закладок;
— в истории браузера;
— в результатах поиска (Яндекс и Google показывают favicon в мобильной выдаче);
— в некоторых мобильных браузерах на главном экране.
Favicon — это часть брендинга. Если у сайта нет иконки, браузер показывает стандартную заглушку. Это выглядит менее профессионально и снижает узнаваемость.
Проверить favicon можно через проверку favicon.
Зачем нужен favicon
Четыре причины.
Узнаваемость. Пользователь запоминает иконку и быстрее находит сайт среди открытых вкладок.
Профессионализм. Сайт без favicon выглядит незавершённым. Особенно это заметно в поисковой выдаче.
CTR в поиске. Яндекс и Google показывают favicon в мобильной выдаче. Иконка привлекает внимание и может повысить кликабельность.
Брендинг. Favicon — это мини-логотип, который работает на узнаваемость бренда.
Favicon не является фактором ранжирования напрямую. Но он влияет на восприятие сайта и косвенно — на поведенческие факторы.
Как проверить favicon
Три способа.
Способ 1. Инструмент проверки favicon
Самый быстрый способ — использовать онлайн-инструмент. SerpMax предоставляет проверку favicon — введите URL, и инструмент покажет:
— есть ли favicon на сайте;
— в каком формате он загружен;
— какой размер;
— корректно ли он отображается;
— рекомендации по исправлению.
Инструмент работает с любым сайтом — не только с вашим.
Способ 2. Проверка через браузер
Откройте сайт в браузере. Посмотрите на вкладку — если слева от заголовка есть иконка, favicon работает. Если иконка стандартная (заглушка) или её нет — favicon отсутствует или настроен неправильно.
Дополнительно: откройте страницу site.ru/favicon.ico. Если файл открывается — favicon есть. Если 404 — нет.
Способ 3. Просмотр кода
Откройте страницу, нажмите «Просмотр кода». Найдите в <head> строку:
<link rel="icon" href="/favicon.ico">
Если тег есть — favicon подключён. Если нет — браузер ищет /favicon.ico в корне сайта по умолчанию.
Форматы favicon
Стандарты favicon меняются. В 2026 году рекомендуется использовать несколько форматов для разных устройств.
ICO. Классический формат. Поддерживается всеми браузерами. Размер — 16x16, 32x32, 48x48 пикселей.
PNG. Современный формат. Поддерживается большинством браузеров. Размер — 32x32, 96x96, 192x192 пикселей.
SVG. Векторный формат. Масштабируется без потери качества. Поддерживается современными браузерами. Размер — любой.
Apple Touch Icon. Для устройств Apple. Формат PNG, размер 180x180 пикселей.
Рекомендуется загружать favicon в нескольких форматах и указывать их в <head> с разными размерами.
Как создать favicon
Создание favicon — процесс из 5 шагов.
Шаг 1. Подготовить изображение
Favicon должен быть простым и узнаваемым. Не используйте сложные логотипы с мелкими деталями — на маленьком размере они не видны.
Что использовать: букву, символ, упрощённый логотип, геометрическую фигуру.
Шаг 2. Выбрать размер
Рекомендуемые размеры:
— 16x16 — для вкладок браузера;
— 32x32 — для закладок и истории;
— 180x180 — для Apple Touch Icon;
— 192x192 и 512x512 — для PWA и Android.
Шаг 3. Конвертировать в нужные форматы
Используйте онлайн-конвертеры или графические редакторы. Сохраните favicon в ICO, PNG и SVG (если возможно).
Шаг 4. Загрузить на сайт
Разместите файлы favicon в корне сайта или в папке /assets/. Классический favicon.ico должен быть в корне: site.ru/favicon.ico.
Шаг 5. Подключить в HTML
Добавьте в <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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
После загрузки проверьте favicon через проверку favicon.
Типичные ошибки с favicon
Пять частых проблем.
1. Favicon отсутствует
Самая частая ошибка. Сайт не имеет favicon вообще. Браузер показывает стандартную заглушку.
Что делать: создать favicon и подключить его в HTML.
2. Favicon в неправильном формате
Например, только PNG без ICO. Некоторые браузеры не поддерживают PNG для favicon.
Что делать: использовать ICO как основной формат + PNG и SVG для современных браузеров.
3. Favicon не в корне сайта
Браузер по умолчанию ищет /favicon.ico в корне. Если файл в другом месте — его нужно указать в HTML.
Что делать: разместить favicon.ico в корне или указать путь через <link>.
4. Favicon слишком сложный
Мелкие детали не видны на размере 16x16. Логотип с текстом или сложной графикой превращается в кашу.
Что делать: упростить дизайн. Использовать крупные элементы, контрастные цвета.
5. Favicon не обновляется
Браузеры кешируют favicon. Если вы обновили иконку — пользователи могут видеть старую версию.
Что делать: добавить версию к имени файла (favicon-v2.ico) или очистить кеш через заголовки.
Favicon и поисковые системы
Яндекс и Google показывают favicon в мобильной выдаче. Это влияет на восприятие сайта и может повысить CTR.
Что важно для поисковиков:
— favicon должен быть квадратным;
— размер — не менее 32x32 пикселей;
— формат — ICO, PNG или SVG;
— файл должен быть доступен по прямому URL;
— favicon не должен быть закрыт в robots.txt.
После обновления favicon поисковики могут показывать старую версию несколько недель. Это нормально — нужно время на переобход.
Как часто проверять favicon
Рекомендуемая частота:
— после создания или обновления favicon;
— после редизайна сайта или смены логотипа;
— раз в полгода — как часть общего SEO-аудита;
— если заметили, что favicon не отображается в поиске.
Проверить favicon можно через проверку favicon.
Часто задаваемые вопросы
Что такое favicon?
Favicon — это маленькая иконка сайта, которая отображается во вкладке браузера, в закладках, в истории и в результатах поиска. Это часть брендинга сайта.
Как проверить favicon сайта?
Через проверку favicon в SerpMax. Или откройте страницу site.ru/favicon.ico в браузере — если файл открывается, favicon есть.
Какой формат favicon лучше?
Рекомендуется использовать несколько форматов: ICO (классический), PNG (современный), SVG (векторный). ICO — для старых браузеров, PNG и SVG — для современных.
Какой размер favicon оптимальный?
16x16 и 32x32 — для вкладок и закладок. 180x180 — для Apple Touch Icon. 192x192 и 512x512 — для PWA и Android.
Влияет ли favicon на SEO?
Напрямую — нет. Косвенно — через CTR в мобильной выдаче и узнаваемость бренда. Яндекс и Google показывают favicon в мобильном поиске.
Почему favicon не отображается в поиске?
Причины: favicon отсутствует, неправильный формат, файл закрыт в robots.txt, поисковик ещё не переобошёл сайт. Проверьте через проверку favicon.
Как создать favicon?
Подготовьте квадратное изображение (16x16, 32x32, 180x180), конвертируйте в ICO и PNG, загрузите на сайт, подключите в HTML через <link rel="icon">.
Как часто нужно проверять favicon?
После создания или обновления, после редизайна, раз в полгода как часть SEO-аудита. Если favicon не отображается — проверьте немедленно.
