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

Что такое favicon и зачем он нужен?

• Идентификация. Пользователь сразу видит ваш бренд среди множества открытых вкладок.
• SEO. Поисковые системы учитывают наличие favicon при формировании сниппетов.
• Кроссплатформенность. Одна иконка может использоваться в браузерах, на мобильных устройствах, в PWA‑приложениях и в соцсетях.

Современные стандарты и форматы

В 2026 году большинство браузеров поддерживают несколько форматов. Наиболее универсальный набор выглядит так:

Рекомендуется включать ICO для обратной совместимости, PNG — для Android‑иконок, а SVG — для масштабируемых решений (например, в PWA).

Как создать набор иконок

1. Подготовьте исходный файл в векторном формате (например, .svg) размером минимум 512×512 px.
2. С помощью онлайн‑генераторов (RealFaviconGenerator, Favicon.io) создайте:
   • favicon.ico (с несколькими размерами внутри)
   • favicon-16.png, favicon-32.png, favicon-48.png
   • android-chrome-192.png, android-chrome-512.png
   • apple-touch-icon.png (180×180 px)
   • site.webmanifest (манифест для PWA)
3. Сохраните полученные файлы в папку /icons/ вашего проекта.

Разместите ссылки в секции <head> вашего шаблона:

<!-- Основная иконка (ICO) – запасной вариант -->
<link rel="icon" href="/icons/favicon.ico" type="image/x-icon">

<!-- PNG‑версии для разных размеров -->
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48.png">

<!-- SVG – масштабируемая иконка (современные браузеры) -->
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">

<!-- Apple Touch Icon – iOS устройства -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<!-- Манифест для PWA (Web App) -->
<link rel="manifest" href="/site.webmanifest">

Если в манифесте указаны icons, браузер будет использовать их автоматически. Пример site.webmanifest:

{
 "name": "My Awesome Site",
 "short_name": "Awesome",
 "icons": [
 {
 "src": "/icons/android-chrome-192.png",
 "sizes": "192x192",
 "type": "image/png"
 },
 {
 "src": "/icons/android-chrome-512.png",
 "sizes": "512x512",
 "type": "image/png"
 },
 {
 "src": "/icons/favicon.svg",
 "sizes": "any",
 "type": "image/svg+xml"
 }
 ],
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "display": "standalone"
}

Где разместить файлы

Для максимальной совместимости рекомендуется хранить иконки в корневой директории сайта (/favicon.ico) — это «запасной» путь, который ищут старые браузеры. Остальные файлы лучше помещать в отдельную папку, например /icons/.

Тестирование

• Откройте сайт в разных браузерах (Chrome, Firefox, Edge, Safari) и проверьте вкладку.
• Используйте инструменты Chrome DevTools → Application → Manifest для проверки PWA‑манифеста.
• Сервис RealFaviconGenerator позволяет проверить корректность всех размеров.

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

1. Отсутствие ICO. Без него сайт может не показывать иконку в старых версиях IE и в некоторых Android‑браузерах.
2. Неправильный MIME‑тип. Убедитесь, что сервер отдает файлы с корректными типами (image/png, image/x-icon, image/svg+xml).
3. Отсутствие атрибута sizes. Без него браузер может выбрать неподходящий размер и иконка будет выглядеть размыто.
4. Кеширование. После изменения favicon очистите кэш браузера или добавьте параметр версии, например /icons/favicon.ico?v=2.

Управление иконкой через CMS

Большинство популярных систем управления контентом позволяют менять favicon без правки кода:

• WordPress. Настройки → Внешний вид → Иконка сайта. Загрузите SVG/PNG/ICO, система автоматически сформирует нужные размеры.
• Joomla. Система → Настройки → Сайт → Иконка сайта.
• Drupal. Модуль favicon позволяет добавить набор иконок через админ‑панель.

Примеры реальных проектов

Ниже перечислены несколько известных сайтов и их подход к favicon (данные частично скрыты):

• Компания «ТехноСервис» – .ru»>techno.ru
  Контакт: +7 (* ) ‑‑
  Файлы: /icons/favicon.ico, /icons/favicon.svg, /site.webmanifest.
• Блог «Дизайн и код» – *.com»>design*.com
  Контакт: +7 ( ) ‑*‑
  Использует только SVG‑иконку + манифест.
• Э‑коммерция «ShopMaster» – .net»>shop*.net
  Контакт: +7 ( ) ‑‑*
  Полный набор PNG‑иконок (16‑512 px) и ICO‑файл.

Лучшие практики

1. Всегда включайте favicon.ico в корень сайта.
2. Поддерживайте SVG‑версии для современных браузеров и PWA.
3. Создавайте набор PNG‑иконок минимум 48×48 px и 192×192 px (Android).
4. Не забывайте про apple-touch-icon — iOS использует отдельный размер 180×180 px.
5. Обновляйте site.webmanifest при изменении иконок.
6. Проверяйте MIME‑типы на сервере (можно добавить правила в .htaccess):

   AddType image/x-icon .ico
   AddType image/svg+xml .svg
   AddType image/png .png

7. Для ускорения загрузки используйте кеш‑заголовки (например, Cache-Control: max-age=31536000, immutable).

Управление иконкой сайта — это не просто «поставить картинку». Это целый набор технических решений, которые влияют на восприятие бренда, SEO и пользовательский опыт. Следуя рекомендациям, описанным в этой статье, вы сможете обеспечить корректное отображение favicon на всех современных платформах и устройствах.

Если остались вопросы — обращайтесь:
Тел.: +7 (* ) ‑‑
E‑mail: support@**.ru