Favicon: что это и как создать

Favicon — маленькая иконка сайта, отображаемая во вкладке браузера, закладках и истории. Влияет на узнаваемость бренда и профессиональный вид сайта.

Что такое Favicon

Favicon (сокр. от "favorite icon") — маленькое изображение, которое браузер отображает перед названием сайта во вкладке, в адресной строке, в закладках и в истории просмотров. Стандартный размер — 16×16 или 32×32 пикселей.

Favicon был введён в Internet Explorer 5 в 1999 году. Современные браузеры поддерживают множество размеров и форматов для разных устройств и контекстов: от маленького favicon во вкладке до иконки на домашнем экране мобильного.

Название файла по умолчанию: /favicon.ico. Большинство браузеров автоматически запрашивают этот файл при каждом посещении.

Зачем нужен Favicon

Узнаваемость бренда: пользователь видит favicon во всех вкладках и закладках — визуальная идентификация сайта.

Доверие: сайт без favicon выглядит незаконченным или непрофессиональным.

Закладки и история: отсутствие favicon заменяется стандартной иконкой браузера — ваш сайт сложнее найти в закладках.

PWA и мобильные: при добавлении сайта на домашний экран телефона используется apple-touch-icon или маска иконка.

Размеры Favicon

| Размер | Использование | |--------|---------------| | 16×16 | Вкладка браузера | | 32×32 | Задание Windows, вкладка (Retina) | | 48×48 | Windows иконки | | 180×180 | Apple Touch Icon (iOS) | | 192×192 | Android домашний экран, PWA | | 512×512 | PWA splash screen |

Форматы Favicon

ICO — классический формат, поддерживает несколько размеров в одном файле. Рекомендован для корневого favicon.ico.

PNG — современный формат, лучше качество, меньше размер. Для всех специфических размеров.

SVG — векторный, масштабируется идеально. Поддерживают Chrome, Firefox, Edge (не Safari для вкладок).

WebP — хорошее сжатие, но ограниченная поддержка для favicon.

Как добавить Favicon

Полный набор HTML-тегов

<head>
  <!-- Классический favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />

  <!-- PNG версии -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

  <!-- SVG (поддерживает тёмную тему) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

  <!-- Apple устройства -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

  <!-- Android / PWA -->
  <link rel="manifest" href="/site.webmanifest" />
</head>

Web App Manifest (site.webmanifest)

{
  "name": "reChecker",
  "short_name": "reChecker",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

SVG с тёмной темой

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #333; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #fff; }
    }
  </style>
  <circle cx="50" cy="50" r="40"/>
</svg>

Инструменты для создания Favicon

favicon.io — генерирует все размеры из одного PNG или буквы
realfavicongenerator.net — полный набор для всех платформ
Figma/Photoshop — создание с нуля

Проверка Favicon на reChecker

Используйте Проверку Favicon для аудита иконок сайта. Инструмент покажет:

Наличие и доступность favicon
Поддерживаемые размеры и форматы
Наличие Apple Touch Icon и Web Manifest
Предупреждения о пропущенных размерах

FAQ

Favicon влияет на SEO? Напрямую нет. Но favicon улучшает пользовательский опыт и доверие к сайту. Google иногда показывает favicon в результатах мобильного поиска перед названием сайта — это влияет на CTR.

Почему браузер показывает старый favicon? Браузеры агрессивно кешируют favicon. Для сброса кеша: откройте DevTools → Network → поставьте галочку Disable cache → обновите страницу. Или добавьте версионирование: href="/favicon.ico?v=2".

Нужен ли отдельный favicon для мобильных? Да. Apple Touch Icon (180×180) используется при добавлении на домашний экран iOS. Android использует иконки из Web App Manifest. Без них браузер использует стандартный favicon или скриншот страницы.