Иконка приложения — размеры для iOS и Android, правила и ошибки

Иконка приложения — самый маленький носитель бренда и одновременно самый нагруженный. По ней находят приложение на экране среди полусотни соседей. По ней же принимают решение об установке в сторе, где рядом стоят конкуренты. И всё это — на площади в пару квадратных сантиметров. Из этого единственного факта — крошечный размер при огромной нагрузке — выводится буквально каждое правило ниже, включая то, что требования Apple и Google местами прямо противоположны.

Один мастер‑файл, из которого собирается всё

Начнём с хорошей новости, потому что она снимает главный страх. Вручную нарезать десятки размеров под каждый экран не нужно: Xcode, Android Studio и кроссплатформенные сборщики (Expo, Flutter) генерируют весь набор из одного исходника. Ваша задача — не размеры, а правильный мастер.

Раз всё растёт из одного файла, важно понять, каким его хочет видеть каждая платформа, — а хотят они разного, и не по прихоти.

Правила iOS: система всё делает за вас

iOS исходит из того, что единый вид иконок на экране — забота системы, а не разработчика. Отсюда все запреты, и каждый логичен, если помнить, что финальную огранку накладывает сама ОС:

• Не скругляйте углы сами. Система накладывает фирменную маску‑суперэллипс автоматически. Пришлёте уже скруглённое — получите двойное скругление с артефактами по углам.
• Без прозрачности. Фон обязан быть залит: прозрачные области App Store либо отклонит, либо зальёт чёрным.
• Без текста — кроме случая, когда текст и есть знак. Мелкие подписи в иконке нечитаемы и выглядят любительски.
• Тёмная и тонированная версии (iOS 18+). Системе нужны варианты для тёмной темы, так что заранее продумайте, как знак живёт на тёмном фоне.

Android идёт от прямо противоположной идеи — и потому требует другого мастера.

Правила Android: иконка из двух слоёв

Если iOS сама решает, как обрезать иконку, то Android с 8-й версии идёт дальше: он не просто обрезает, а разбирает иконку на два слоя — фоновый (background) и передний (foreground) — и накладывает маску сам: круг, скруглённый квадрат, «каплю», плюс анимирует слои с параллаксом. Разработчик не знает заранее, какую форму выберет устройство пользователя, и из этого незнания следуют три правила:

• Знак — только в безопасной зоне. Из холста 108 dp гарантированно видны центральные 66 dp. Всё важное держите внутри этого круга, иначе маска отрежет край.
• Фон — отдельным слоем. Однотонный цвет или простой градиент; узор на фоне при параллаксе выглядит беспокойно и дёргано.
• Не полагайтесь на форму. Раз маска непредсказуема, знак обязан работать в любой из них — и в круге, и в квадрате.

Обе платформы, при всей разнице, сходятся в одном требовании к самому знаку — он должен быть предельно простым. Отсюда и подход к тому, как сделать иконку из логотипа.

Как сделать иконку из логотипа

Процесс родственен фавикону (разбирали его в отдельной статье), но требования жёстче: иконка крупнее и конкурирует за внимание активнее. Пять шагов, и каждый — прямое следствие теста «узнаётся в 48 пикселях»:

1. Берите знак, а не полный логотип. Горизонтальный логотип с текстом в квадрате превращается в нечитаемую полоску. В иконку идёт символ: буква, знак, упрощённая форма.
2. Масштаб крупнее, чем кажется. Знак должен занимать 60–75% холста. Робкая маленькая иконка в центре пустого поля просто теряется на экране.
3. Минимум деталей. Проверка простая: уменьшите до 48×48 — всё ещё узнаётся? Значит, градиенты простые, линии толстые, элементов один‑два.
4. Контрастный фон. Иконка живёт на неизвестных обоях, поэтому свой фон обязателен. Белый знак на фирменном цвете — классика, которая работает.
5. Проверьте рядом с конкурентами. Сделайте скриншот домашнего экрана, вставьте свою иконку в сетку и посмотрите честно: находится ли она глазами за секунду?

Когда какой‑то из шагов пропущен, результат предсказуем — и предсказуемо одинаков.

Иконка, фавикон и аватарка — одна система

Заметьте, что тест «выживает в маленьком размере» справедлив не только для иконки. У бренда три «малых носителя», и делать их вразнобой — значит трижды решать одну задачу. Логичнее один раз: тот же знак, тот же цвет фона, та же логика упрощения. Иконка приложения — самая детальная из трёх, фавикон — самый аскетичный, аватарка — посередине (и обрезается в круг, о чём писали в статье про размеры). Если знак изначально спроектирован по принципу «выживает в 16 пикселях», все три носителя выходят из одного исходника за полчаса.

Иконка как витрина: почему она двигает установки

До сих пор мы говорили об иконке как о навигации. Но у неё есть вторая работа, и она объясняет, почему ради иконки стоит стараться. В выдаче стора пользователь видит иконку, название и рейтинг — и по этой троице решает, тапать ли. То есть иконка — ещё и витрина, а витрину оптимизируют. Отсюда практики ASO (оптимизации в сторах):

• A/B‑тесты иконок. Обе платформы дают штатные инструменты (эксперименты в консолях). Команды регулярно получают ±10–30% к конверсии в установку простой сменой иконки — это самый дешёвый прирост в мобильном маркетинге.
• Что тестировать. Цвет фона, крупность знака, наличие рамки. Мелкие детали не тестируют — их всё равно не видно в выдаче.
• Сезонность. Крупные приложения меняют иконку под события (Новый год, распродажи): событийная иконка выделяется в ряду обычных. Но важно возвращаться к базовой версии — постоянная карнавальность размывает узнаваемость.
• Иконка = обещание. Стор наказывает за мисматч: иконка «казино» у судоку приводит не тех пользователей, они тут же удаляют приложение, метрики удержания падают, выдача проседает.

Из этой же логики «иконка — лицо, за которое отвечаешь» вырастают и формальные причины отказов на ревью.

Ошибки при сдаче в сторы и чем они кончаются

Отдельная тонкость Android вытекает из непредсказуемости маски: у производителей она разная — круг у Pixel, скруглённый квадрат у Samsung, «капля» у части китайских оболочек. Поэтому адаптивную иконку тестируют минимум в двух масках, эмулятор Android Studio это умеет.

Технический чек‑лист перед сдачей

1. Мастер 1024×1024, PNG, без альфа‑канала, углы прямые.
2. Android: слои background + foreground, знак в безопасной зоне 66 dp.
3. Тест в 48 px и на светлых/тёмных обоях.
4. Тёмная версия для iOS 18+.
5. Исходник — в векторе: следующий редизайн скажет спасибо. Почему вектор обязателен как основа, разбирали в статье о векторе и растре.
6. Проверка в двух масках Android (круг и скруглённый квадрат).
7. Иконка согласована с фавиконом и аватаркой — один знак, один цвет, одна система.

Итог

Всё сводится к одной цепочке: один векторный знак → мастер 1024×1024 с запасом по простоте → автогенерация наборов. iOS скругляет сама и запрещает прозрачность, Android хочет два слоя и безопасную зону — но обе платформы обслуживают один и тот же тест: узнаётся ли иконка в 48 пикселях на пёстрых обоях среди пятидесяти соседей. Пройдёт этот тест — пройдёт и ревью, и витрину стора.

Посмотреть, как сильные бренды решают свои знаки в малых размерах, можно в нашем каталоге логотипов — у многих компаний там лежат и полные логотипы, и отдельные иконки‑знаки в векторе.