Загрузка...
Загрузка...
Нашли баг, сбой или ошибку в работе reChecker? Есть предложение по улучшению? Напишите нам, чтобы мы проверили и исправили проблему в сервисе.
Проверьте favicon сайта онлайн. Все размеры: ICO, PNG, Apple Touch, Android Chrome. Частые ошибки и исправления.
Быстрые определения и связанные понятия из SEO-глоссария reChecker.
Favicon — маленькая иконка сайта, отображаемая во вкладке браузера, закладках и истории. Влияет на узнаваемость бренда и профессиональный вид сайта.
Читать в глоссарии →Open Graph — протокол разметки страниц для красивого превью при репосте в соцсетях. Узнайте какие og-теги нужны и как их настроить правильно.
Читать в глоссарии →SEO-аудит — комплексная проверка сайта для выявления факторов, мешающих ранжированию. Включает технический анализ, on-page SEO, ссылочный профиль и контент.
Читать в глоссарии →Мета-теги — HTML-элементы в секции head, передающие информацию о странице поисковикам и браузерам. Узнайте какие мета-теги важны для SEO.
Читать в глоссарии →Сравнение форматов PNG, JPG, WebP, AVIF. Когда конвертировать, как влияет качество на размер файла. Конвертер изображений онлайн.
УтилитыПолный список размеров favicon для всех платформ. Apple Touch Icon, Android, Windows, PWA. Таблицы и разметка для полной совместимости.
УтилитыПолное руководство по favicon. Форматы ICO, PNG, SVG. Разметка в HTML, поддержка браузеров, генерация. Практические рекомендации для веб-разработчиков.
УтилитыПолное руководство по форматам штрих-кодов: EAN-13 для товаров, Code128 для логистики, Code39 для промышленности. Онлайн-генерация и проверка.
Поделитесь с коллегами или изучите другие материалы блога
Favicon — маленькая иконка сайта в браузерной вкладке, закладках и поисковой выдаче. Кажется мелочью, но отсутствие или неправильная настройка favicon создаёт ошибки 404 в логах, ухудшает отображение в мобильных браузерах и снижает доверие пользователей.
Браузер автоматически запрашивает /favicon.ico при каждой загрузке страницы. Если файл отсутствует — в логах появляется ошибка 404. Поисковики учитывают наличие favicon при формировании сниппета: иконка отображается рядом с URL в результатах поиска Google.
Помимо традиционного 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 — старый формат, специфичный для 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">
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".
Для 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.ico по стандартному пути<link> теги в HTML-коде страницыsizesapple-touch-icon и site.webmanifestПроверка favicon на reChecker анализирует иконки вашего сайта по URL: находит все объявленные иконки, проверяет их доступность и размеры, выявляет типичные ошибки настройки.