Favicon проверщик
Всесторонняя проверка
Проверка всех favicon-файлов сайта, включая различные форматы и размеры
Проверка совместимости
Проверка совместимости фавиконов на разных платформах и устройствах
Рекомендации по оптимизации
Подробные рекомендации по оптимизации и лучшие практики
Классические форматы
favicon.ico
Традиционный ICO формат, совместимый со всеми браузерами
favicon.png
Современный PNG формат, поддерживающий прозрачный фон
favicon.svg
Векторный формат, поддерживающий темную тему
Мобильные устройства
Apple Touch Icon
Иконка для главного экрана iOS-устройств
Android Chrome
Иконка для PWA в Android
Web App Manifest
Файл конфигурации PWA
Пример полной конфигурации
<!-- Basic Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Android Chrome Icon -->
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<!-- Meta Tags -->
<meta name="theme-color" content="#ffffff">
<meta name="application-name" content="Your App Name">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">Зачем нужны разные форматы Favicon?
Разные браузеры и устройства поддерживают разные форматы и размеры. Предоставление нескольких форматов гарантирует корректное отображение иконки на всех платформах.
Нужно ли использовать ICO формат?
ICO формат всё ещё является наиболее совместимым выбором, особенно для старых версий браузеров.
Что такое Web App Manifest?
Web App Manifest — это JSON-файл, определяющий конфигурацию PWA (иконки, название, цвет темы и т.д.).