Favicon — маленькая иконка сайта в браузерной вкладке, закладках и поисковой выдаче. Кажется мелочью, но отсутствие или неправильная настройка favicon создаёт ошибки 404 в логах, ухудшает отображение в мобильных браузерах и снижает доверие пользователей.
Что такое favicon и зачем он нужен
Браузер автоматически запрашивает /favicon.ico при каждой загрузке страницы. Если файл отсутствует — в логах появляется ошибка 404. Поисковики учитывают наличие favicon при формировании сниппета: иконка отображается рядом с URL в результатах поиска Google.
Помимо традиционного favicon, современные браузеры и операционные системы запрашивают иконки разных размеров для разных контекстов: панели задач, экрана «Домой» на смартфоне, вкладок в браузерах.
Необходимые размеры favicon
Полный набор иконок для всех платформ:
| Размер | Назначение | Формат |
|---|---|---|
| 16×16 | Вкладка браузера (классический) | ICO, PNG |
| 32×32 | Вкладка браузера (Retina) | ICO, PNG |
| 48×48 | Ярлык Windows | ICO |
| 180×180 | Apple Touch Icon (iPhone/iPad) | PNG |
| 192×192 | Android Chrome, PWA | PNG |
| 512×512 | PWA-заставка, Google Discover | PNG |
Минимальный набор для большинства сайтов: favicon.ico (16+32+48 в одном файле) и apple-touch-icon.png (180×180).
Форматы: ICO vs PNG
ICO — старый формат, специфичный для Windows. Преимущество: один файл может содержать несколько размеров (multiresolution ICO). Браузеры понимают его без <link> тега.
PNG — современный вариант. Лучшее сжатие, поддержка прозрачности, быстрая обработка. Требует явного <link> тега в <head>.
Рекомендуемая структура HTML:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Частые ошибки с favicon
1. Неправильный путь. Если favicon лежит в /images/favicon.ico, браузер всё равно сначала ищет /favicon.ico. Всегда указывайте явный <link> тег или размещайте файл в корне.
2. Кэш браузера. После обновления иконки пользователи долго видят старую версию. Добавьте версионирование: /favicon.ico?v=2 или используйте хэш в имени файла.
3. Отсутствие Apple Touch Icon. Когда пользователь iOS добавляет сайт на экран «Домой», браузер ищет apple-touch-icon.png. Без него iOS масштабирует произвольный скриншот страницы — результат некрасивый.
4. Неверные размеры. Иконка 16×16, растянутая на 180×180 — размытое пятно. Подготовьте отдельный файл нужного размера.
5. Отсутствие type в теге. Некоторые браузеры не распознают формат без явного type="image/png".
site.webmanifest и PWA-иконки
Для Progressive Web App создайте файл site.webmanifest:
{
"name": "Название сайта",
"short_name": "Сайт",
"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",
"display": "standalone"
}
Подключите манифест в <head>:
<link rel="manifest" href="/site.webmanifest">
Для проверки мета-тегов и Open Graph сниппета используйте инструмент мета-тегов. Предварительный просмотр вида ссылки в соцсетях доступен в OG Preview. Если нужно создать favicon с нуля, воспользуйтесь генератором favicon.
Как проверить favicon сайта
Инструмент проверки favicon анализирует:
- Наличие
/favicon.icoпо стандартному пути <link>теги в HTML-коде страницы- Доступность всех указанных иконок (HTTP-статус 200)
- Соответствие размеров объявленным в
sizes - Наличие
apple-touch-iconиsite.webmanifest
Инструмент на reChecker
Проверка favicon на reChecker анализирует иконки вашего сайта по URL: находит все объявленные иконки, проверяет их доступность и размеры, выявляет типичные ошибки настройки.