Favicon и иконки сайта — как сделать правильно

Favicon — это иконка сайта, которую браузер показывает рядом с названием вкладки. Маленькая, но работает сразу на нескольких уровнях: узнаваемость бренда, доверие пользователя и даже видимость в поисковой выдаче. Если иконки нет или она размытая — браузер покажет серый квадрат с буквой. Для бизнеса это примерно как вывеска магазина, которая отвалилась и никто не починил. Технически несложно, но встречается куда чаще, чем хотелось бы — и в Хабаровске, и в Москве, и вообще на каждом третьем сайте.

Ниже — конкретика: полный набор файлов, HTML-код подключения, требования Яндекса к favicon в выдаче, дизайн-правила и чек-лист для проверки.

Где виден favicon и почему это важно для доверия

Иконка сайта появляется в куда большем числе мест, чем принято думать. Перечислим основные — это сразу объясняет, зачем вкладывать в неё усилия.

• Вкладка браузера — самое очевидное место. Когда у пользователя открыто десять вкладок, именно favicon помогает мгновенно найти нужную. Без иконки вкладка выглядит безликой.
• Закладки и история браузера — иконка стоит рядом с названием, её видно при каждом открытии списка. Человек возвращается на знакомый сайт через закладку, узнаёт бренд.
• Результаты поиска Яндекса — favicon показывается прямо рядом со сниппетом сайта. Маленький, но заметный элемент: красивая фирменная иконка выделяет вас на фоне конкурентов с серыми квадратами.
• Строка адреса браузера — пока страница грузится, там видна иконка. Быстро даёт понять: «я на правильном сайте».
• Экран смартфона — если пользователь добавил сайт на главный экран через «Поделиться → На экран „Домой"» (iOS) или Chrome (Android), сайт становится похож на приложение. Иконка там — основной визуальный идентификатор.
• PWA (Progressive Web App) — для сайтов, оформленных как прогрессивные приложения, иконка появляется в меню приложений смартфона наравне с нативными.

Итого: favicon — это мини-лицо бренда, которое видят десятки тысяч раз в самых разных контекстах. На наших проектах клиенты нередко удивлялись, узнав, что их иконка в выдаче Яндекса — серый квадрат, хотя логотип на сайте есть. Просто про favicon забыли.

Какой набор иконок нужен в 2026 году

Ответ простой: один файл favicon.ico больше не решает задачу. Разные платформы и устройства запрашивают разные форматы и размеры. Вот полная таблица актуального набора.

Добавьте к этому файл manifest.json (или site.webmanifest) — он описывает иконки для Android и PWA, название и цвет темы приложения.

Как подключить favicon: код в head и manifest.json

Весь набор подключается через теги <link> в секции <head>. Вот минимально необходимый блок.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">

Файл site.webmanifest (или manifest.json) выглядит примерно так:

{
  "name": "Название сайта",
  "short_name": "Имя",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Для SVG-favicon с поддержкой тёмной темы добавьте отдельный тег — современные браузеры (Chrome 80+, Firefox 84+) его поддерживают:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Требования к дизайну: как нарисовать иконку, которую видно в 16px

Главная ошибка при разработке favicon — взять логотип компании и уменьшить его до 16×16 пикселей. Если логотип состоит из тонкого леттеринга или мелких деталей, на маленьком размере он превратится в нечитаемую кашу.

Несколько правил, которые работают на практике:

• Простая форма. Один символ, монограмма, пиктограмма из логотипа — не полный логотип. Если у вас «Ромашка» — достаточно цветка. Если бренд узнаётся по первой букве — делайте монограмму.
• Высокий контраст. Тёмный значок на светлом фоне — или наоборот. Средние полутона исчезают при уменьшении. Проверяйте на белом и сером фоне одновременно.
• Никакого мелкого текста. Слова короче 3–4 крупных букв в 32×32 пикселях становятся нечитаемыми. Исключение — отдельные крупные буквы-монограммы (1–2 символа).
• Фирменный цвет. Иконка должна ассоциироваться с брендом. Используйте основной цвет из айдентики — это усиливает узнаваемость в закладках.
• Пиксельная проверка. Перед финальным экспортом откройте иконку в размере 16×16 и 32×32 — буквально в редакторе. То, что выглядит хорошо в 512 px, может смазаться при уменьшении.

Для maskable-иконки (Android) добавьте безопасную зону: основной символ должен помещаться в центральные 80% площади — края будут обрезаны маской (круг, квадрат с закруглёнными углами и т. д. в зависимости от лаунчера).

Как favicon влияет на сниппет в Яндексе

Яндекс отображает favicon рядом со сниппетом в поисковой выдаче с 2019 года — и это реально работает на кликабельность. Маленькая фирменная иконка выделяет результат, добавляет визуальный якорь. Требования Яндекса немного строже, чем просто «иконка существует».

• Размер — минимум 16×16 пикселей, оптимально 32×32 или 48×48.
• Доступность по HTTPS — файл favicon.ico или PNG должны открываться без редиректов и без ошибок 404.
• Не блокируйте в robots.txt — Яндекс-бот должен иметь возможность скачать файл.
• Иконка индексируется с задержкой — до двух недель после публикации или смены. Не паникуйте, если новая иконка не появилась сразу.
• Иконка должна быть «чистой» — без агрессивной рекламы, запрещённого контента. Яндекс вправе не показывать favicon при нарушении рекомендаций.

Проверить, как Яндекс видит ваш favicon, можно через Яндекс Вебмастер → Инструменты → Проверка ответа сервера. Туда же вводите путь до файла иконки.

Инструменты для генерации полного набора

Генерировать все размеры вручную — лишняя работа. Есть удобные онлайн-инструменты, которые из одного исходника делают весь пакет разом.

• RealFaviconGenerator.net — де-факто стандарт. Загружаете SVG или PNG 512×512 и выше, получаете ZIP с полным набором файлов и готовым HTML-кодом. Поддерживает maskable-иконки, тёмную тему.
• Favicon.io — проще, подходит для быстрой генерации из текста, эмодзи или картинки.
• Figma / Adobe Illustrator — если иконка нестандартная, нарисуйте сами в векторе, потом экспортируйте в нужных размерах.

Главное правило — исходник должен быть векторным (SVG) или растровым размером не менее 512×512 пикселей. Масштабирование вверх всегда даёт размытие.

Практика: где менять favicon на 1С-Битрикс и Аспро

Многие клиенты, для которых мы делаем разработку сайтов на 1С-Битрикс и решениях Аспро, спрашивают: куда класть файлы и где в админке всё настраивается?

На чистом 1С-Битрикс:

• Файл favicon.ico и PNG-иконки кладутся в корень сайта (/favicon.ico, /favicon-32x32.png и т. д.).
• Код подключения прописывается в шаблоне — файл header.php или через $APPLICATION->AddHeadString() в component_epilog.php нужного компонента.

На теме Аспро (Allcorp3, Next, Optima и других):

• В административной панели → «Сайты» → выбрать сайт → вкладка «Настройки» → поле «Favicon» — загружаете основной файл.
• Для расширенного набора (apple-touch-icon, manifest.json) файлы кладутся вручную в корень, а код вставляется через «Дополнительные мета-теги» в настройках шаблона или через custom.php.
• После обновления темы Аспро проверяйте, не перезаписались ли файлы иконок — иногда при апдейте корневые файлы затираются шаблонными заглушками.

Также обратите внимание на кэш браузера: после замены favicon старая иконка может отображаться ещё несколько дней. Обойти это помогает версионирование в URL — например, /favicon.ico?v=2. Это не нарушает стандарт, но браузер заново скачивает файл.

Частые ошибки с favicon

За несколько лет работы над сайтами в Хабаровске и по всему Дальнему Востоку мы собрали типичную коллекцию «а почему у нас нет иконки?».

• Только favicon.ico, остальное не подключено. Смартфоны и PWA не знают об ico-файле. Apple берёт только apple-touch-icon.png, Android ориентируется на manifest.json.
• Размытая иконка. Исходник взят мелкий (48×48 или меньше) и масштабирован вверх. При отображении на ретине выглядит нечётко.
• Файл не отдаётся сервером. Иконка загружена, но сервер возвращает 404. Причины — неверный путь, файл в подпапке вместо корня, права доступа на файл.
• Закрыто в robots.txt. Директива Disallow: /*.ico или Disallow: /*.png запрещает Яндексу скачивать иконку. Яндекс не показывает favicon в выдаче.
• Кэш после замены. Обновили иконку, а в браузере стоит старая. Пользователи видят прежний вариант ещё несколько дней — используйте версионирование или проинформируйте команду, что нужно сбросить кэш.
• Нет manifest.json. Без него сайт не получает полноценного статуса PWA, а Android не знает, как назвать и оформить ярлык на экране.

Чек-лист: favicon готов к запуску

1. Есть favicon.ico (мультиразмерный: 16×16 + 32×32 внутри).
2. Есть PNG-иконки 16×16, 32×32, 48×48.
3. Есть apple-touch-icon.png 180×180.
4. Есть android-chrome-192x192.png и android-chrome-512x512.png.
5. Есть maskable-icon-512x512.png (с безопасной зоной 80%).
6. Есть site.webmanifest с правильными путями.
7. Весь набор подключён через теги <link> в <head>.
8. Все файлы доступны по HTTPS, не закрыты в robots.txt.
9. Иконка читается в размере 16×16 (проверили глазами).
10. После замены — сброшен кэш или добавлено версионирование ?v=X.

Частые вопросы

Нужен ли отдельный favicon.ico, если есть PNG?
Да, ico-файл по-прежнему нужен. Ряд старых браузеров, RSS-ридеров и парсеров запрашивает именно /favicon.ico — без него они покажут пустую иконку. Современные ico-генераторы делают мультиразмерный файл (16 + 32 px внутри одного ico), так что проблема решается раз и навсегда.

Почему favicon не появляется в Яндексе, хотя иконка на сайте есть?
Чаще всего — три причины: файл закрыт в robots.txt, иконка отдаётся по HTTP вместо HTTPS, или Яндекс просто ещё не переиндексировал страницу. Проверьте через Яндекс Вебмастер → Проверка ответа сервера. Полная индексация после изменений занимает до двух недель.

Что такое maskable-иконка и нужна ли она?
Maskable-иконка — это PNG с запасными полями по краям. Android-лаунчеры обрезают иконку приложения по разным формам (круг, скруглённый квадрат и т. д.). Без maskable-варианта стандартная иконка получит белые поля или будет обрезана неудачно. Для PWA и сайтов с добавлением на экран — обязательно.

Можно ли использовать SVG-favicon?
Да, и это лучший вариант для современных браузеров. SVG масштабируется идеально, плюс можно добавить CSS-медиазапрос для тёмной темы прямо внутри SVG-файла: светлая иконка превратится в тёмную автоматически при переключении системной темы. Chrome 80+, Firefox 84+, Edge 80+ поддерживают. Но ico/PNG всё равно оставьте для обратной совместимости.

Как часто нужно обновлять иконки?
При ребрендинге или смене логотипа — обязательно. В остальных случаях набор меняется редко: разве что добавляются новые размеры под новые платформы. В 2024–2025 годах актуальным стало добавление SVG-favicon и maskable-версии — если вы ставили иконки раньше, стоит добавить эти два файла к существующему набору.

Если хотите, чтобы мы разобрались с иконками, шаблоном и технической SEO-базой вашего сайта, — звоните: 8 800 55-100-10. Работаем с сайтами на 1С-Битрикс, Аспро и других платформах — для компаний из Хабаровска, Владивостока и по всей России. Подробнее об услугах — на странице разработки сайтов.