Проверка Favicon

Кратко (TL;DR)

Важность проверки: Сломанный favicon вызывает ошибки 404 в логах сервера и снижает доверие к бренду.
Комплексный анализ: Этот инструмент сканирует ваш сайт как браузер, проверяя favicon.ico, PNG-иконки, Apple Touch Icons и Web Manifests.
Полезная обратная связь: Получите конкретные отчеты о доступности файлов, несоответствии размеров и валидности форматов.

Зачем проверять favicon?

Развертывание favicon кажется простым, но на практике часто возникают скрытые ошибки. Современные экосистемы браузеров (Desktop, Android, iOS) имеют разные требования.

Кэширование браузера: Локальные браузеры агрессивно кэшируют иконки, часто скрывая проблемы.
Фрагментированные стандарты: Вам нужно больше, чем просто favicon.ico. Устройства Apple ищут apple-touch-icon. Android и PWA ищут site.webmanifest.
Конфигурация сервера: Правильные пути в HTML бесполезны, если сервер возвращает 403 ошибку или неверный MIME-тип.

Что проверяется

Наш анализатор выполняет многоэтапный аудит:

Парсинг HTML: Мы сканируем <head> для поиска всех объявленных ссылок на иконки.
Валидация манифеста: Мы проверяем, соответствуют ли объявленные размеры в Web Manifest реальным файлам.
Доступность: Мы пытаемся загрузить каждую иконку, чтобы убедиться, что она возвращает статус 200 OK.
Формат и размеры: Мы проверяем бинарные данные, чтобы убедиться, что файл является валидным изображением и размеры совпадают.
Скрытое обнаружение: Мы проверяем стандартные пути, такие как /favicon.ico.

Частые ошибки развертывания

1. “Призрачная” иконка

У вас есть тег <link>, но файл возвращает 404. Решение: Проверьте путь к файлу относительно корня домена.

2. Несоответствие формата

Вы объявляете type="image/png", но отдаете JPEG или ICO. Решение: Убедитесь, что заголовок Content-Type сервера соответствует реальному формату.

3. Ложь о размерах

HTML говорит sizes="32x32", но реальное изображение 16x16. Решение: Используйте Генератор Favicon для создания точных размеров.

4. Отсутствует Apple Touch Icon

Без apple-touch-icon пользователи iOS увидят общий скриншот страницы при добавлении на главный экран. Решение: Всегда включайте PNG 180x180 для Apple.

Лучшие практики

Резерв в корне: Всегда имейте favicon.ico в корне (/favicon.ico).
SVG для современных: Используйте SVG favicon (type="image/svg+xml") для независимости от разрешения.
Манифест: Определите отдельные иконки в manifest.json.
Сброс кэша: Используйте query string (например, ?v=2) при обновлении.

Фавиконки