Іконка додатку — перше, що бачить користувач у сторі. Якщо вона не відповідає вимогам платформи, сабміт відхилять. Іконка tab bar, намальована без урахування оптичної ваги, заплутує навігацію. Ми вирішуємо ці проблеми на основі 10+ років досвіду в мобільній розробці та понад 50 реалізованих проєктів.
Чому важливо дотримуватися вимог App Store і Google Play до іконок?
App Store: потрібне зображення 1024×1024px у PNG без альфа-каналу. Xcode генерує решту розмірів через Asset Catalog. До недавніх версій iOS вимагалося 20+ розмірів, тепер сучасні версії Xcode приймають Single Size і масштабують автоматично. Але ми все одно перевіряємо результат на фізичних пристроях: алгоритм масштабування іноді дає нечіткі краї на маленьких розмірах. Згідно з App Store Review Guidelines (Section 4.2), іконка має бути без тексту і відображати функціонал додатку.
Google Play: 512×512px PNG для сторінки додатку + адаптивна іконка для лончера. Адаптивна іконка — два шари: foreground (108×108dp, контентна зона 72×72dp) і background. Починаючи з Android 13 підтримується monochromatic icon (третій шар). Без адаптивної іконки на Android 8+ лончер може обрізати іконку по колу, і логотип опиниться обрізаним.
| Платформа | Розмір (базовий) | Особливості |
|---|---|---|
| iOS | 1024×1024px PNG | Single Size, Asset Catalog, перевірка на devices |
| Android | 512×512px PNG + adaptive icon | Foreground 108×108dp, background, monochromatic (13+) |
Як вибрати між SF Symbols і кастомними іконками?
На iOS стандартом стали SF Symbols — системна бібліотека з 5000+ іконок, що підтримує всі ваги шрифту, multicolor та анімацію (починаючи з iOS 17). Якщо дизайн будується на SF Symbols, розробка отримує безкоштовно: масштаб, темізацію, доступність. Кастомні іконки потрібні тільки там, де SF Symbols не покриває — наприклад, фірмові символи для фінтеху або медицини. На Android аналог — Material Symbols з тими ж можливостями.
Використання SF Symbols замість кастомних іконок скорочує час розробки на 30–40% і пришвидшує дизайн у 2–3 рази, оскільки не вимагає відмальовування та експорту кожного елемента.
Формати експорту для розробника
| Фреймворк | Формат | Інструмент |
|---|---|---|
| iOS/SwiftUI | PDF-вектор в Asset Catalog | Scales: Single Scale |
| Android | Vector Drawable XML | Android Studio → File → New → Vector Asset |
| React Native | SVG через react-native-svg | SVGR для трансформації в компоненти |
| Flutter | SVG через flutter_svg | FlutterIcon.com для конвертації |
SVG має бути чистим: без зайвих груп, без трансформацій на кореневому елементі, без embedded bitmap. Перевіряємо в Figma перед експортом: Outline Stroke на всіх обводках, Flatten на складних булевих операціях.
Що входить у роботу зі створення іконок
- Аналіз вимог — вивчаємо дизайн-макет, платформенні гайдлайни, стилістику.
- Проектування сітки — обираємо єдиний розмір (24×24 або 28×28pt) і оптичну вагу.
- Малювання — створюємо іконки в Figma з урахуванням візуального вирівнювання.
- Експорт — готуємо файли для кожної платформи (PDF, XML, SVG).
- Верифікація — перевіряємо на фізичних пристроях та в симуляторах.
- Передача — віддаємо вихідники та готові набори розробнику.
Чек-лист перевірки іконок перед відправкою в магазин
- Розміри відповідають вимогам App Store та Google Play
- Відсутній альфа-канал (iOS)
- Адаптивна іконка коректно відображається на Android 8+
- Іконки інтерфейсу оптично вирівняні
- Файли експортовані без зайвих групувань
Набір іконок для додатку
Типовий набір для середньої складності додатку: 30–80 іконок. Tab bar (4–5 штук), toolbar actions (8–15), іконки категорій (10–30), системні (закрити, назад, поділитися). Усі іконки малюємо в єдиній сітці з однаковою візуальною вагою — оптичне вирівнювання, а не математичне. Кругла іконка має бути трохи більшою за квадратну того ж розміру, щоб виглядати однаково.
Термін — 2–3 дні на повний набір іконок для середньостатистичного додатку. Вартість розраховується індивідуально, якість підтверджена досвідом понад 50 проєктів. Замовте розробку іконок під ключ — зв'яжіться з нами для оцінки вашого проєкту. Отримайте консультацію з іконок вашого додатку.