Лучшие размеры значков для веб-сайтов

favicon масштабируется до множества физических пикселей: 16×16 на вкладке, 32×32 на панели закладок Retina, 180×180 на главном экране iPhone, 512×512 на заставке PWA. Одно изображение не может хорошо служить всем.

Увеличение масштаба крошечного источника приводит к размытию. При уменьшении разрешения до 1024×1024 без тестирования теряются тонкие линии. Исправление представляет собой небольшой набор специально созданных экспортированных файлов или один .ico нескольких размеров, в который встраиваются общие рамки рабочего стола.

Доставка каждого размера, указанного в старых сообщениях в блоге, является расточительством. Слишком малое количество поставок оставляет видимый пробел на одной платформе. Матрица ниже отражает реальные запросы, измеренные в браузерах 2026 года.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

На вкладках рабочего стола обычно отображается значок CSS пикселей размером 16 × 16, который соответствует пикселям устройства 16 × 16 или 32 × 32 в зависимости от плотности дисплея.

Панели закладок и закрепленные вкладки часто используют размер 32×32 или 48×48. Chromium может автоматически выбрать ближайший встроенный кадр из favicon.ico.

Все три распространенных размера вкладок (16, 32, 48) удобно помещаются в один универсальный размер .ico. Вот почему контейнер .ico остается наиболее эффективным форматом доставки на рабочий стол.

Windows Меню «Пуск», кнопки на панели задач и ярлыки проводника могут запрашивать размеры 24×24, 32×32, 48×48, 64×64, 128×128 или 256×256 в зависимости от контекста и масштабирования дисплея.

Microsoft документирует 16, 24, 32, 48, 64, 128 и 256 как практический набор для приложений Windows. Web favicon выигрывает от объединения по крайней мере 16–256 в favicon.ico.

macOS предпочитает .icns для собственных приложений, но с радостью использует .ico и PNG для веб-ярлыков. iOS игнорирует .ico для значков на главном экране и требует выделенного PNG 180×180 через Apple-Touch-Icon.

Манифесты веб-приложений требуют значков с любым назначением и, при необходимости, маскируемых. Общие размеры: 192×192 и 512×512 PNG.

Android Chrome использует значки манифеста для пользовательского интерфейса установки и заставок. Источник 512×512 четко уменьшает масштаб; Манифест размером только 192×192 выглядит мягким на телефонах высокого класса.

iOS не считывает значки манифеста для размещения на главном экране. Вы должны объявить <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

16×16 — вкладки браузера (плотность 1×). 32×32 — вкладки и закладки на дисплеях Retina. 48×48 — некоторые контексты пользовательского интерфейса Windows и устаревшие закладки.

64×64 и 128×128 — ярлыки Windows при более высоком масштабе. 256×256 — закрепленные плитки Windows и предварительный просмотр с высоким разрешением.

180×180 — иконка apple-touch (iOS/iPadOS). 192×192 и 512×512 — значки манифеста PWA для Android и приглашения на установку.

Личный блог: favicon.ico только с 32.16.48. Приемлемо, если вас не интересует полировка домашнего экрана iOS.

Маркетинговый сайт компании: пакет .ico плюс значок apple-touch размером 180×180 плюс PNG <link> 32×32 для явных вкладок Retina.

Устанавливаемый PWA: полный .ico, apple-touch-icon, манифест 192 + 512, дополнительный SVG для масштабируемого пользовательского интерфейса Chrome.

Настольное приложение Electron: Windows .ico с 16–256; macOS .icns отдельно, если вы распространяете вне браузера.

favicon.ico нескольких размеров (16, 32, 48, 64, 128, 256) по адресу /favicon.ico.

apple-touch-icon.png с разрешением 180×180 для главных экранов iOS.

Один PNG 512×512 в site.webmanifest для установочных поверхностей Android.

Это трио покрывает примерно 95% реальных запросов на иконки. Добавьте SVG, если вам нужно бесконечное масштабирование и стиль темного режима на современных вкладках.

Нужен ли мне PNG 16×16, если он находится внутри .ico? Нет, если только вам не нужен явный <link rel="icon" sizes="16x16"> для отладки.

Требуется ли еще размер 120×120? Это был старый размер iOS. Современный Safari ожидает 180×180.

А как насчет favicon размером 64 × 64? Полезно внутри .ico для Windows; редко требуется в качестве автономного PNG.

Могу ли я пропустить 256×256? Только если вас никогда не интересуют предварительные просмотры ярлыков Windows с высоким разрешением. Большинство команд включают его.

Значок iOS имеет закругленные углы и выглядит обрезанным: это маскировка iOS — дизайн с безопасным заполнением, а не ошибка в вашем файле.

При установке PWA отображается общий значок: значки манифеста отсутствуют или их размер меньше 192×192. Проверьте JSON с помощью Chrome DevTools → Приложение.

Tab icon soft on Retina Mac: ensure favicon.ico contains a 32×32 frame, not only 16×16.

Огромная загрузка .ico: вы встроили несжатый файл размером 256×256 BMP. Перестройте со сжатием PNG внутри контейнера.

Пиксели CSS не являются физическими пикселями. В слот вкладок 16×16 на дисплее 2× часто загружается растровое изображение 32×32 для повышения резкости.

Вот почему favicon.ico, содержащий как 16, так и 32 кадра, превосходит одиночный PNG 16×16 на MacBook Retina и ноутбуках Windows с высоким разрешением.

Android PWA отображают значки манифеста на заставках при полном разрешении устройства — источник 192×192, растянутый на телефон с разрешением 1440p, выглядит мягким; Разрешение 512×512 четко уменьшает масштаб.

iOS применяет собственную маску и угловой радиус к значкам сенсорного яблока. Конструкция с безопасной набивкой, поэтому важные края не защемляются завитком.

При тестировании сделайте снимок экрана вкладки при 100 % масштабировании браузера и 200 % масштабировании ОС. Если оба изображения выглядят четкими, возможно, ваша матрица размеров верна.

Загрузите favicon.ico и откройте его с помощью инструмента, содержащего список встроенных фреймов. Убедитесь, что существуют 16, 32, 48 и хотя бы один кадр большого размера.

Получите apple-touch-icon.png и проверьте размеры в любом инспекторе изображений — в устаревших шаблонах ожидайте 180×180, а не 120×120.

Откройте site.webmanifest и убедитесь, что значки [] имеют размеры 192×192 и 512×512 с правильными путями и типами изображений/png.

Загрузите свой сайт в Chrome DevTools → Приложение → Манифест. Отсутствующие или недействительные записи отображают предупреждения еще до того, как пользователи увидят неработающее диалоговое окно установки.

Сохраняйте электронную таблицу, сопоставляющую каждый файл с его потребителем (вкладка iOS, PWA, Windows). В будущем вам не придется перепроектировать папку с ресурсами во время ребрендинга.

Новые классы устройств появляются медленно на территории favicon. Значки манифеста размером 512×512 сегодня лучше охватывают складные и планшетные пользовательские интерфейсы, чем 192 в одиночку.

Избегайте экзотических размеров (96×96, 120×120), если они не предусмотрены документом конкретной платформы — они усложняют авторскую работу, но не приносят большой пользы.

Сохраните главный вектор или растр 1024×1024 в репозитории проекта, даже если вы никогда его не отправите. Будущие платформы могут запрашивать более крупные значки манифеста.

Автоматизируйте регенерацию из образца, чтобы при появлении нового рекомендуемого размера можно было повторно запустить сценарий вместо ручного экспорта в Photoshop.