Загрузка...
Загрузка...
Нашли баг, сбой или ошибку в работе сервиса? Есть предложение по улучшению? Напишите нам — мы читаем каждое сообщение и стараемся быстро исправлять проблемы.
Проверьте favicon сайта онлайн. Все размеры: ICO, PNG, Apple Touch, Android Chrome. Частые ошибки и исправления.
Полное руководство по favicon. Форматы ICO, PNG, SVG. Разметка в HTML, поддержка браузеров, генерация. Практические рекомендации для веб-разработчиков.
УтилитыПолный список размеров favicon для всех платформ. Apple Touch Icon, Android, Windows, PWA. Таблицы и разметка для полной совместимости.
УтилитыКак правильно использовать эмодзи на сайте: кодировки Unicode, отображение в браузерах, влияние на CTR и SEO, доступность и альтернативные тексты.
УтилитыHTML entities: именные, десятичные и hex коды. Таблица спецсимволов. Когда и зачем экранировать символы в HTML.
Поделитесь с коллегами или изучите другие материалы блога
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: находит все объявленные иконки, проверяет их доступность и размеры, выявляет типичные ошибки настройки.