Какой размер должен быть у 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 | Современные браузеры, масштабируемые иконки, тёмная тема |
Best practice: Use PNG + ICO + SVG together.
Recommended HTML Markup
<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">Common Favicon Mistakes
- Using only one favicon size
- Forgetting Apple Touch Icons
- Missing PWA icons
- Using low-resolution source images
Generate All Favicon Sizes Automatically
Instead of manually resizing icons, you can generate all required favicon sizes instantly using favicon.pub. Upload a single image and download a complete package containing ICO, PNG, SVG, Apple Touch Icons, Android icons, and a PWA manifest.
Internal Links
Загрузите изображение и получите полный набор favicon‑иконок