Чтобы сделать фавикон для сайта, подготовьте простой квадратный значок, сохраните его в нескольких форматах — favicon.ico, SVG, PNG 180×180 для Apple и 192×192 и 512×512 для манифеста — и подключите их тегами <link> в разделе head. Ниже — какие файлы действительно нужны в 2026 году, готовый код и нюансы отображения в Яндексе.
Что такое фавикон и где он показывается
Фавикон (favicon, от favorite icon) — маленький значок сайта. Его видят чаще, чем главную страницу: во вкладке браузера, в закладках, в истории, на экране смартфона, если сайт добавлен как ярлык, и в поисковой выдаче рядом с адресом сайта.
Именно последнее место делает фавикон маркетинговым инструментом. В выдаче Яндекса и Google значок стоит рядом с названием сайта, и узнаваемая иконка помогает выделиться среди конкурентов. Сайт без фавикона получает серую заглушку и выглядит незаконченным. А когда у посетителя открыто полтора десятка вкладок, именно значок помогает быстро вернуться к вашему сайту.
Как нарисовать хороший фавикон
Фавикон показывается в размере 16×16 или 32×32 пикселя, поэтому подход к дизайну другой, чем у логотипа.
- Один элемент. Первая буква названия, знак из логотипа или простой символ. Полный логотип с надписью в таком размере превращается в пятно.
- Контраст. Значок должен читаться и на светлой, и на тёмной вкладке браузера. Проверьте оба варианта.
- Фон. Прозрачный фон подходит для вкладок, но на домашнем экране iPhone прозрачные области станут чёрными. Для apple-touch-icon используйте залитый фон.
- Поля. Для иконок манифеста оставляйте запас по краям: Android может обрезать значок в круг или скруглённый квадрат.
- Проверка в реальном размере. Уменьшите макет до 16 пикселей и посмотрите на него с обычного расстояния. Если не узнаёте — упрощайте.
Рисовать удобно в векторе — Figma, Illustrator или бесплатный Inkscape. Из вектора потом легко получить все нужные форматы без потери качества.
Какие форматы и размеры нужны
Раньше в интернете гуляли списки из двух десятков PNG разных размеров. Сегодня современным браузерам достаточно небольшого набора файлов.
| Файл | Размер | Для чего |
|---|---|---|
favicon.ico |
32×32 (можно с 16×16 внутри) | Старые браузеры, поисковые роботы, запрос по умолчанию к корню сайта |
icon.svg |
Вектор | Современные браузеры, чёткость на любых экранах, поддержка тёмной темы |
apple-touch-icon.png |
180×180 | Ярлык на домашнем экране iPhone и iPad |
icon-192.png |
192×192 | Манифест, ярлык на Android |
icon-512.png |
512×512 | Манифест, заставка при запуске веб-приложения |
Зачем нужен SVG
SVG — векторный формат, поэтому значок остаётся чётким на экранах высокой плотности. Главная его особенность — внутри SVG можно прописать CSS-медиазапрос prefers-color-scheme и менять цвет значка для тёмной темы браузера. Например, тёмная иконка на светлой вкладке и светлая на тёмной. Все современные браузеры на основе Chromium и Firefox поддерживают SVG-фавиконы. Safari долго с ними не работал, поэтому рядом всегда оставляют ICO и apple-touch-icon как запасные варианты.
Зачем всё ещё нужен ICO
Многие браузеры и сервисы по привычке запрашивают /favicon.ico из корня сайта, даже если в коде ничего не указано. Если файла нет, сервер отдаёт ошибку 404, которая засоряет логи. Поэтому ICO кладут в корень всегда. Создать его можно в онлайн-генераторах или в графическом редакторе с поддержкой этого формата.
Как подключить фавикон: готовый код
Вставьте в раздел <head> каждой страницы:
<link rel="icon" href="/favicon.ico" sizes="32x32"><link rel="icon" href="/icon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.webmanifest">
Атрибут sizes="32x32" у ICO нужен, чтобы браузеры с поддержкой SVG выбрали векторную версию, а не растровую.
Файл манифеста
Манифест — небольшой JSON-файл, который описывает сайт как веб-приложение. Минимальное содержимое: название (name), массив icons с двумя PNG — 192×192 и 512×512 с указанием sizes и type. Если хотите, чтобы Android красиво обрезал иконку под форму системы, добавьте отдельную версию с увеличенными полями и параметром "purpose": "maskable".
Подключение в популярных CMS
- WordPress: «Внешний вид» → «Настроить» → «Свойства сайта» → «Иконка сайта». Загрузите квадратное изображение не меньше 512×512, система сама создаст нужные размеры. Файл
favicon.icoв корень всё равно лучше положить вручную. - 1С-Битрикс: файл
favicon.icoкладут в корень сайта, а ссылки на остальные иконки добавляют в шаблон сайта в секцию head. - Tilda: в настройках сайта в разделе «Главное» есть поле для загрузки иконки.
Как Яндекс подхватывает фавикон
У Яндекса есть отдельный робот для значков — YandexFavicons. Он находит иконку по тегу <link rel="icon"> на главной странице или, если тега нет, по файлу /favicon.ico в корне. Чтобы значок появился в выдаче, проверьте несколько условий.
- Файл фавикона доступен роботу: не закрыт в robots.txt и отдаёт код ответа 200.
- Ссылка на иконку указана на главной странице сайта.
- Формат поддерживается: Яндекс работает с ICO, PNG, GIF и SVG. Для чёткого отображения в выдаче Яндекс рекомендует значок размером 120×120 пикселей или векторный SVG — уточнить актуальные требования можно в справке Яндекс Вебмастера.
- Значок не нарушает правила: без шокирующих изображений и без попытки имитировать чужой бренд.
Изменения появляются не сразу: после установки или замены фавикона обновление в выдаче может занять от нескольких дней до нескольких недель. Ускорить процесс напрямую нельзя, но полезно отправить главную страницу на переобход в Яндекс Вебмастере.
Google также показывает фавикон в мобильной и десктопной выдаче. По его рекомендациям значок должен быть квадратным, размером кратным 48 пикселям (48×48, 96×96, 144×144 и так далее) или в SVG, и находиться на главной странице. Проверить, как Google видит страницу, можно через инструмент проверки URL в Google Search Console.
Пошаговый план: от макета до проверки
- Нарисуйте значок в векторе на квадратной области, проверьте его в размере 16 и 32 пикселя на светлом и тёмном фоне.
- Сохраните SVG-версию, при необходимости добавьте в неё вариант цвета для тёмной темы.
- Экспортируйте PNG 180×180 на залитом фоне для Apple и PNG 192×192 и 512×512 для манифеста.
- Соберите
favicon.icoразмером 32×32 и положите его в корень сайта. - Создайте файл манифеста и добавьте теги
<link>в head всех страниц, включая главную. - Откройте каждый файл по прямой ссылке и убедитесь, что сервер отдаёт код 200.
- Проверьте вкладку в нескольких браузерах, добавьте сайт на домашний экран телефона.
- Отправьте главную на переобход в Яндекс Вебмастере и Google Search Console.
Частые ошибки
- Уменьшенный полный логотип с текстом, который невозможно разобрать.
- Прозрачный PNG для apple-touch-icon, который превращается в значок на чёрном фоне.
- Ссылка на иконку только на внутренних страницах, но не на главной.
- Иконка лежит в папке, закрытой в robots.txt, например в каталоге темы.
- После замены значка браузер продолжает показывать старый. Это кеш: проверьте в режиме инкогнито или добавьте к адресу файла параметр версии, например
/icon.svg?v=2. - Тёмный значок, который пропадает на тёмной вкладке браузера.
Частые вопросы
Можно ли использовать только SVG?
Технически современные браузеры справятся, но лучше не рисковать. Safari, старые браузеры и часть сервисов запрашивают ICO или PNG. Минимальный надёжный набор — ICO, SVG и apple-touch-icon; манифест добавьте, если важен вид ярлыка на Android.
Почему фавикон не отображается в Яндексе?
Чаще всего файл недоступен роботу, ссылки нет на главной странице или прошло слишком мало времени. Проверьте код ответа файла, robots.txt и дайте Яндексу несколько недель. Если значок так и не появился, проверьте, соответствует ли он требованиям справки Вебмастера.
Влияет ли фавикон на SEO?
На позиции напрямую — нет. Но узнаваемый значок делает сниппет заметнее, а значит, может положительно сказаться на кликабельности в выдаче. Кроме того, отсутствующий фавикон создаёт лишние ошибки 404 в логах сервера.
Можно ли сделать анимированный фавикон?
Некоторые браузеры поддерживают анимированный GIF во вкладке, но поисковые системы покажут только статичный кадр, а движение во вкладке многих раздражает. Для бизнес-сайта лучше выбрать статичный значок.
Фавикон — мелочь, но из таких мелочей складывается впечатление о сайте. Если нужно навести порядок с иконками, мета-тегами и другими техническими деталями, специалисты Pear Advert сделают это в рамках доработки сайта или регулярной поддержки. Задайте вопрос через контакты.
