Багато розробників стикаються з відхиленням іконки в App Store через прозорі пікселі або неправильний розмір. Ми вирішуємо цю проблему на етапі дизайну: гарантуємо, що фінальний PNG 1024×1024pt не містить альфа-каналу, а округлення вписується в squircle-маску. Наш досвід — 5+ років розробки iOS-додатків, десятки успішно прийнятих іконок. У цій статті розберемо всі технічні нюанси — від форматів до перевірки на реальних шпалерах.
Чому squircle-маска важлива для іконки?
Apple не використовує звичайне заокруглення кутів. Натомість застосовується супереліпс (squircle), який робить кути більш плавними. Якщо іконка намальована з радіусом 22% від розміру, важливі деталі по краях можуть обрізатися. У Figma ми накладаємо маску iOS Icon Mask (squircle) як clip mask для точного попереднього перегляду. Фінальний експорт — квадрат без маски, з непрозорим фоном.
Які розміри та формати потрібні сьогодні?
Apple вимагає один мастер-файл 1024×1024px у PNG без прозорості. У сучасних версіях Xcode достатньо додати його в AppIcon.appiconset — система сама згенерує всі розміри. Для довідки наведемо таблицю типових піктограм:
| Призначення | Розмір (pt) | Масштаби |
|---|---|---|
| Home Screen | 60pt | @1x, @2x, @3x |
| Spotlight | 40pt | @1x, @2x, @3x |
| Settings | 29pt | @1x, @2x, @3x |
| Notifications | 20pt | @1x, @2x, @3x |
| App Store | 1024×1024 (мастер) | — |
Для iPad та macOS Catalyst можуть знадобитися додаткові розміри — використовуємо один Universal icon set.
Як перевіряти іконку на різних шпалерах?
Після генерації всіх розмірів потрібно протестувати читаність на світлих, темних і кольорових шпалерах. Особливу увагу приділяємо розміру 20pt (Spotlight) — там часто губляться дрібні деталі. Використовуємо вбудований у Xcode симулятор з різними шпалерами або експортуємо іконку та дивимося на реальному пристрої. Якщо деталі нерозрізнені — повертаємося до макету та спрощуємо.
Порівняння: самостійна підготовка vs наша розробка
Багато хто намагається згенерувати іконку автоматично, але це часто призводить до непередбачуваного обрізання при squircle-масці. Ручне опрацювання в 2-3 рази точніше за автоматичну генерацію — кожен елемент вивіряється під супереліпс. Це скорочує час на доопрацювання та зменшує ризик відхилення модерацією.
Типи іконок та їх особливості
| Тип іконки | Кількість мастер-файлів | Вимоги до фону | Додаткові налаштування |
|---|---|---|---|
| Звичайна | 1 | Непрозорий, будь-який колір | — |
| Темна | 1 (додатково) | Непрозорий, адаптований під темну тему | Потрібен окремий entry в Asset Catalog |
| Альтернативна | 1 на кожну | Непрозорий | Виклик UIApplication.shared.setAlternateIconName |
Які підводні камені при підготовці іконки?
Найчастіша помилка — використання прозорості в мастер-файлі. Навіть напівпрозорий шар на 1% призведе до того, що Apple перетворить його на чорний колір, і іконка виглядатиме неохайно. Друга поширена проблема — елементи, що виходять за безпечну зону squircle. Рекомендуємо у Figma ввімкнути направляючі для iOS App Icon, щоб уникнути обрізання.
Як ми розробляємо іконку: покроковий процес
- Аналіз концепції — вивчаємо бренд, цільову аудиторію, вимоги App Store Review Guidelines.
- Створення макету — малюємо векторний дизайн у Figma на фреймі 1024×1024, одразу перевіряємо squircle-маску.
- Експорт та підготовка — зберігаємо PNG без альфа-каналу за допомогою експорту «iOS Icon».
- Генерація Asset Catalog — імпортуємо мастер-файл у Xcode, перевіряємо коректність генерації всіх розмірів.
- Тестування — перевіряємо читаність на розмірах 20pt (Spotlight) та 60pt (Home Screen) на світлих, темних і кольорових шпалерах.
- Темна іконка — за бажанням створюємо варіант з окремим мастер-файлом і налаштуванням
UIApplication.shared.setAlternateIconNameдля альтернативних іконок.
Що входить у результат?
Після завершення ви отримуєте:
- Вихідники у Figma (векторні макети з накладеною squircle-маскою).
- Мастер-файл 1024×1024 PNG без прозорості.
- Готовий
AppIcon.appiconsetдля Xcode (включаючи всі розміри для iPhone, iPad, Mac Catalyst). - Якщо погоджено пакет — додатковий варіант для темної теми та/або альтернативні іконки.
- Коротку інструкцію з інтеграції в проект.
Наші інженери мають 5+ років досвіду в iOS-розробці, виконано більше 40 проектів з кастомними іконками. Економія часу на модерацію — до 30% за рахунок точної попередньої підготовки.
Терміни та вартість
Розробка одного варіанту іконки з фінальними вихідниками — від 4 годин до 1 дня в залежності від складності. Кілька концепцій на вибір — 1–2 дні. Вартість розраховується індивідуально від 4 годин роботи спеціаліста.
Отримайте консультацію — оцінимо ваш проект і запропонуємо концепцію іконки. Замовте розробку під ключ — від ескізу до готового пакету у форматі для Xcode та App Store Connect.