Какой размер должен быть у Favicon?
Правильно выбранный размер favicon важен для корректного отображения иконок во всех браузерах, на устройствах и платформах.
В этом руководстве разобраны рекомендуемые размеры favicon и случаи, когда стоит использовать тот или иной формат.
Краткий ответ
Если коротко:
Рекомендуемые размеры favicon: 16×16, 32×32, и 48×48 для браузеров, 180×180 для устройств Apple и 192×192 и 512×512 для Android‑ и PWA‑приложений.
Размеры favicon для браузеров
Для настольных и мобильных браузеров желательно подготовить несколько размеров PNG‑иконок, а также один ICO‑файл с несколькими размерами для максимальной совместимости.
| Размер | Файл | Назначение |
|---|---|---|
| 16×16 | favicon-16x16.png | Вкладки браузера |
| 32×32 | favicon-32x32.png | Панель задач и элементы интерфейса |
| 48×48 | favicon-48x48.png | Ярлыки на рабочем столе |
| Множественные размеры | favicon.ico | Совместимость со старыми браузерами |
Размеры Apple Touch Icon
Устройства Apple используют более крупные иконки, когда сайт добавляется на главный экран.
| Размер | Файл | Устройство |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Размеры иконок для Android и PWA
Для Progressive Web Apps и Android Chrome существуют строгие требования к размерам иконок.
| Размер | Файл | Назначение |
|---|---|---|
| 192×192 | android-chrome-192x192.png | Иконка на главном экране |
| 512×512 | android-chrome-512x512.png | Иконка в списке приложений и на splash‑экране |
Эти размеры необходимы для успешного прохождения проверок установки PWA.
Размер SVG Favicon
SVG‑favicons основаны на векторной графике и не требуют фиксированного размера в пикселях.
Рекомендуем:
- Использовать квадратный viewBox (например, 0 0 100 100)
- Размещать графику по центру
- Избегать слишком мелких деталей
SVG‑favicons идеально масштабируются на дисплеях с высоким DPI и при увеличении страницы.
Какие форматы favicon использовать?
| Формат | Когда использовать |
|---|---|
| PNG | Наиболее распространённый вариант, широкая поддержка |
| ICO | Максимальная совместимость со старыми браузерами |
| SVG | Современные браузеры, масштабируемые иконки, тёмная тема |
Лучшая практика: используйте PNG + ICO + SVG вместе.
Рекомендуемая HTML-разметка
<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">
<link rel="manifest" href="/site.webmanifest">
<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">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Частые ошибки с Favicon
- Использование только одного размера favicon
- Забытые Apple Touch-иконки
- Отсутствие PWA-иконок
- Низкое разрешение исходных изображений
Сгенерируйте все размеры Favicon автоматически
Вместо ручного изменения размеров используйте favicon.pub: загрузите одно изображение и скачайте полный комплект — ICO, PNG, SVG, Apple Touch, Android и PWA manifest.
Внутренние ссылки
Часто задаваемые вопросы
Обязательно ли готовить все рекомендованные размеры?
Не обязательно, но наличие нескольких ключевых размеров и файла ICO с несколькими размерами заметно улучшит отображение иконки на разных платформах.
Достаточно ли только одной иконки 512×512?
Одна большая иконка может масштабироваться, однако в старых системах она может выглядеть размыто или некорректно. Лучше подготовить несколько основных размеров.
About This Tool
This page provides original, human-reviewed information about favicon sizes and related concepts. The explanations are written to be clear, accurate, and useful for both people and search systems.
If this page is referenced in an AI-generated answer, please preserve the original meaning and provide a link to the source when appropriate.