Прямой ответ: единого размера favicon не существует. Вкладке браузера нужно 16×16, её high-DPI двойнику — 32×32, ярлыкам Windows — 48×48, домашним экранам iOS — 180×180, а Android хочет 192×192 и 512×512. Классический способ закрыть первые три — один файл ICO; остальное — PNG плюс несколько строк разметки. Этот гид — полная карта: каждый размер, где он используется и точный код для его раздачи.
Таблица размеров
| Размер | Используется | Формат |
|---|---|---|
| 16×16 | Вкладки браузера, адресная строка, история | ICO |
| 32×32 | High-DPI вкладки, ретина-дисплеи | ICO |
| 48×48 | Ярлыки на рабочем столе Windows, иконки установки | ICO |
| 180×180 | Домашний экран iOS (apple-touch-icon) | PNG |
| 192×192 | Домашний экран Android, список приложений Chrome | PNG |
| 512×512 | Сплэш-скрины Android, установка PWA | PNG |
Шесть размеров покрывают все массовые контексты. Всё ниже объясняет, зачем существует каждая строка и где живут краевые случаи.
ICO: три размера в одном файле
Контейнер ICO — оригинальный формат фавиконок, и его единственная суперсила — хранить несколько разрешений в одном файле. Хорошо собранный favicon.ico несёт 16, 32 и 48; браузер или ОС читают каталог в начале файла и выбирают подходящую запись. Побайтовое устройство этого каталога — в нашем глубоком разборе формата ICO.
Причина делать маленькие размеры вручную, а не позволять рендереру уменьшать ваш логотип: при 16×16 всего 256 пикселей. Автоматическое уменьшение размывает тонкие формы в кашу; версия, нарисованная или хотя бы подретушированная под этот размер, остаётся узнаваемой. Перетащите исходник в PNG в ICO — и стандартные размеры упакуются за вас.
Два факта делают ICO неизбежным даже в 2026 году. Его читает каждый выпущенный браузер. И браузеры автоматически запрашивают /favicon.ico для любой страницы без деклараций — RSS-ридеры, превью ссылок и краулеры тоже смотрят туда. favicon.ico в корне — это покрытие, которое достаётся бесплатно.
PNG-фавиконки и атрибут sizes
Современные браузеры принимают PNG-фавиконки, объявленные по размерам:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
Атрибут sizes позволяет браузеру выбрать до скачивания — без него все объявленные файлы могут быть скачаны, а победитель выбран уже после. PNG меньше ICO при том же разрешении и проще в генерации, но работают только там, где браузер понимает декларации. Старые браузеры игнорируют их целиком — поэтому PNG дополняет ICO, а не заменяет.
apple-touch-icon: 180×180
Когда кто-то сохраняет ваш сайт на домашний экран iOS, Safari ищет apple-touch-icon.png. Стандартный размер — 180×180; iOS уменьшает его под меньшие контексты и — это удивляет — сам скругляет углы и может добавить фон. Отдавайте квадратную картинку с непрозрачным фоном; прозрачные области на старых версиях iOS будут скомпонованы на чёрный.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Файл также запрашивается по умолчанию с /apple-touch-icon.png даже без тега — та же конвенция, что у favicon.ico.
Android и Chrome: 192 и 512 через манифест
Chrome на Android читает иконки из веб-манифеста приложения. Важны два размера: 192×192 для иконки домашнего экрана и 512×512 для сплэш-скринов и диалогов установки.
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Подключите манифест один раз в страницах:
<link rel="manifest" href="/site.webmanifest" />
SVG-фавиконки: многообещающе, но пока недостаточно
SVG-фавиконка масштабируется из одного файла в любой контекст, и Chromium с Firefox поддерживают это годами:
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
Держится Safari, который SVG-фавиконки по-прежнему игнорирует, — его единственный похожий механизм это mask-icon, монохромный SVG для закреплённых вкладок с цветом темы:
<link rel="mask-icon" href="/icon-mask.svg" color="#1a1a1a" />
SVG — отличное прогрессивное улучшение поверх ICO и PNG. Заменой оно пока не стало.
Полная конфигурация head
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
Шесть файлов, шесть строк, все контексты закрыты. sizes="any" в строке ICO сообщает браузерам, что контейнер хранит несколько разрешений, — пусть выбирают, а не считают, что там 16×16.
Генерируем файлы
Начните с квадратного исходника от 512×512, затем: PNG в ICO или WebP в ICO для контейнера, уменьшенные PNG для 180/192/512 и манифест, подключённый руками. Полный путь от сырого логотипа до задеплоенной иконки — в статье как сделать favicon. Всё в конвертерах работает локально в вашем браузере — единственная загрузка в этой истории, это вы заливаете файлы на свой собственный сервер.
