Все размеры favicon в 2026: Apple Touch Icon, Android, Windows

Современные устройства и платформы требуют разные размеры иконок: вкладка браузера, домашний экран iOS, плитка Windows, манифест PWA. В этой статье — полный список размеров и разметка для максимальной совместимости. Базовые форматы и разметка описаны в полном руководстве по favicon. Создать все размеры из одного изображения можно в Favicon Generator на reChecker.

Сводная таблица размеров

Платформа	Размер	Формат	Назначение
Браузер (вкладка)	16×16	ICO, PNG	Классический favicon
Браузер (вкладка, Retina)	32×32	PNG	Чёткость на HiDPI
Закладки, панель	48×48	ICO, PNG	Крупные превью
Apple Touch Icon	180×180	PNG	iPhone, iPad домашний экран
Apple Touch Icon (iPad Pro)	167×167	PNG	iPad Pro 12.9"
Android Chrome	192×192	PNG	Добавление на домашний экран
Android Chrome	512×512	PNG	Splash screen, PWA
Windows Tile	70×70	PNG	Маленькая плитка
Windows Tile	150×150	PNG	Средняя плитка
Windows Tile	310×310	PNG	Большая плитка
Safari Pinned Tab	—	SVG	Монохромная иконка вкладки

Браузеры: вкладка и закладки

Базовые размеры

16×16  — стандарт для вкладки
32×32  — Retina, масштабирование
48×48  — закладки, панель избранного

Разметка:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

Или один ICO с несколькими размерами:

<link rel="icon" href="/favicon.ico" sizes="48x48">

Apple: Touch Icon

iOS и iPadOS используют иконки при добавлении сайта на домашний экран. Без указания apple-touch-icon система обрезает скриншот страницы — результат непредсказуем.

Размеры Apple Touch Icon

Устройство	Размер	Примечание
iPhone	180×180	Стандарт
iPad	167×167	iPad Pro 12.9"
iPad (старые)	152×152	iPad с Retina
iPad (старые)	120×120	iPad без Retina

Практический минимум — 180×180. Браузер масштабирует при необходимости.

Разметка

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

Один файл 180×180 покрывает большинство сценариев. Дополнительные размеры — для идеальной чёткости на всех устройствах.

Требования Apple

• PNG с прозрачностью или без
• Квадрат
• Без скругления — iOS применяет маску самостоятельно
• Не добавляйте отступы под скругление — система обрежет края

Android: Chrome и домашний экран

Chrome на Android при «Добавить на главный экран» использует иконки из манифеста или мета-тегов.

Размеры

Назначение	Размер
Иконка на домашнем экране	192×192
Splash screen, PWA	512×512

Разметка

Через манифест (предпочтительно для PWA):

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Через мета-теги (если манифеста нет):

<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">

Windows: плитки и закрепление

При закреплении сайта в Windows 10/11 используются плитки разного размера.

Размеры Windows Tile

Размер	Назначение
70×70	Маленькая плитка
150×150	Средняя плитка
310×310	Большая плитка
310×150	Широкая плитка

Разметка

<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#2b5797">

Или через browserconfig.xml в корне сайта:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>

TileColor — цвет фона плитки при загрузке или для простых иконок.

Safari: Pinned Tab

Safari поддерживает монохромную иконку для закреплённой вкладки — SVG с одним цветом.

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

SVG должен содержать один цвет (обычно чёрный), браузер заменит его на color. Сложные многоцветные иконки не подходят.

Минимальный набор (2026)

Для большинства сайтов достаточно:

Файл	Размер
favicon.ico	16, 32, 48
favicon-32x32.png	32×32
apple-touch-icon.png	180×180
icon-192.png	192×192 (для PWA/Android)
icon-512.png	512×512 (для PWA)

Расширенный набор добавляет размеры для Windows, iPad Pro и Safari Pinned Tab.

Генерация полного набора

Ручное создание десятка размеров трудоёмко. Favicon Generator на reChecker создаёт полный пакет из одного исходного изображения (рекомендуется 512×512 или больше).

Порядок действий:

1. Подготовьте квадратное изображение 512×512 px
2. Загрузите в генератор
3. Скачайте архив с файлами
4. Разместите в корне сайта
5. Добавьте разметку из инструкции генератора

Чек-лист совместимости

• favicon.ico в корне
• PNG 32×32 для вкладки
• Apple Touch Icon 180×180
• Иконки 192×192 и 512×512 для PWA/Android
• browserconfig.xml для Windows (опционально)
• mask-icon для Safari Pinned Tab (опционально)
• Версионирование URL при смене иконок

Базовые форматы и разметка — в полном руководстве по favicon. Создать все размеры можно в Favicon Generator на reChecker.

Генерация через командную строку

ImageMagick для создания набора из одного исходника:

convert icon-512.png -resize 16x16 favicon-16x16.png
convert icon-512.png -resize 32x32 favicon-32x32.png
convert icon-512.png -resize 180x180 apple-touch-icon.png

Для ICO с несколькими размерами:

convert icon-512.png -define icon:auto-resize=64,48,32,16 favicon.ico

Проверка отображения

После размещения проверьте favicon на разных платформах:

• Chrome, Firefox, Safari, Edge — вкладка
• iOS — добавление на домашний экран
• Android — добавление на главный экран
• Windows — закрепление в панели задач

Обновление иконок

При смене брендинга обновите все размеры и добавьте версионирование в URL (?v=3). Предупредите пользователей о смене — старый favicon может кэшироваться долго.

Резюме

Полный набор размеров обеспечивает корректное отображение на всех устройствах. Минимум: favicon.ico, 32×32 PNG, 180×180 Apple Touch Icon. Для PWA — 192×192 и 512×512. Генераторы автоматизируют создание из одного исходного изображения.