Иконки для PWA: требования
Иконки для PWA: требования к размеру и формату кажутся технической мелочью, но именно иконка — первое, что видит пользователь до установки. Разбираем, какие размеры нужны манифесту, что такое maskable-иконка и какие ошибки чаще всего портят первое впечатление.
Технические требования к иконке PWA
Манифест PWA обычно требует набор иконок разных размеров — как минимум 192×192 и 512×512 пикселей в формате PNG, указанных в массиве icons манифеста. Часть размеров используется для домашнего экрана, часть — для сплэш-скрина при запуске, поэтому отсутствие нужного размера может привести к тому, что система подставит размытый увеличенный вариант вместо чёткой иконки.
Почему иконка — это первое впечатление
Иконка появляется в промпте на установку и на домашнем экране раньше, чем пользователь увидит хоть один элемент самой витрины. Она работает в связке с названием: аккуратная, читаемая иконка на фоне понятного названия — то, что снижает недоверие ещё до открытия страницы.
Частые ошибки с иконками
Самая частая ошибка — растянутая с маленького разрешения иконка, которая на экране выглядит размытой. Вторая — недостаточные отступы для maskable-формата, из-за чего важные элементы (текст, логотип) обрезаются системной маской под круг или квадрат со скруглением. Третья — стиль иконки, не совпадающий с вертикалью оффера: слишком «игровая» иконка на финансовом оффере считывается как несоответствие.
Что такое maskable-иконка и как её тестировать
Maskable-иконка — это иконка с запасом безопасной зоны по краям, потому что операционная система обрежет её под свою форму (круг, squircle, квадрат со скруглением) в зависимости от устройства. Проверять нужно на нескольких формах маски и на светлом и тёмном фоне домашнего экрана — иконка, которая выглядит нормально на белом фоне, может слиться с тёмной темой.
Как быстро собрать корректный набор иконок
Вручную готовить каждый размер и формат под каждую связку — трудоёмко и легко забыть один размер, из-за чего манифест частично сломается. В APEX конструктор витрин генерирует нужный набор размеров иконки из одной загруженной картинки автоматически, включая безопасную зону под maskable, что снимает эту рутину с байера.
Частые вопросы
- Какой минимальный размер иконки нужен для PWA?
- Практический минимум — 192×192 и 512×512 пикселей в PNG, этого хватает для большинства сценариев установки и сплэш-экрана. Иконки меньшего разрешения система будет масштабировать с потерей чёткости.
- Что такое maskable icon и почему это важно?
- Это формат иконки с запасом по краям, который позволяет операционной системе обрезать её под свою форму без потери важных элементов. Без этого запаса текст или логотип на иконке может быть срезан маской устройства.
- Можно ли использовать логотип оффера как иконку?
- Можно, если он читаем в маленьком размере и совпадает по стилю с остальной витриной — сложный логотип с мелкими деталями на маленькой иконке превращается в нечитаемое пятно.
- Как APEX упрощает генерацию иконок нужных размеров?
- Достаточно загрузить одно изображение — конструктор автоматически формирует весь набор размеров для манифеста, включая безопасную зону для maskable-формата, без ручной подготовки каждого файла отдельно.
Клоака, антибот, пуши, сплит-тесты и свои домены — в одном сервисе.
Начать бесплатно