Розробка іконки додатку (App Icon) під Android
Іконка Android-додатку після версії 8.0 перетворилася на систему Adaptive Icons: два шари — foreground та background — а лаунчер накладає власну маску (коло, заокруглений прямокутник або «стиснутий» квадрат). Без адаптації логотип обрізається, зміщується або анімується неправильно. Ми стикалися з цим, коли клієнтський логотип на кількох пристроях Pixel перетворювався на безформну пляму. Наш досвід показує, що правильна зона безпеки та роздільна підготовка шарів вирішують проблему. За статистикою, до 15% додатків у Google Play мають іконку, яка на деяких пристроях відображається зі спотвореннями — і це прямий шлях до зниження довіри користувачів. Ми допоможемо уникнути цих проблем. Зв'яжіться з нами для консультації.
Проблеми, які вирішуємо
- Обрізання контенту. Контент foreground має лежати в центральній зоні 66dp з 108dp (66.7%). Будь-яка деталь за межами цієї області гарантовано обрізається хоча б на одній популярній масці. Наприклад, круглий логотип на Pixel обрізається до нечитабельного фрагмента. Ми перевіряємо всі три стандартні маски (коло, заокруглений прямокутник, квадрат із заокругленими кутами).
-
Відсутність монохромного варіанту. Android 13 ввів тематичні значки (Themed Icons). Якщо у додатку немає
ic_launcher_monochrome, система примусово знебарвлює звичайний foreground — результат часто виглядає як брудна пляма. Ми додаємо векторний силует з допуском до tint. - Legacy-пристрої. Додатки на Android < 8.0 не розуміють Adaptive Icons. Потрібен запасний PNG у mipmap-папках (mdpi–xxxhdpi). Ми автоматизуємо експорт усіх розмірів із векторного джерела.
Чому важливо дотримуватися зони безпеки?
Зона безпеки 66dp — не рекомендація, а технічна вимога. Маски лаунчерів (наприклад, коло на Pixel, заокруглений прямокутник на Samsung) відсікають усе, що виходить за центральну область. Якщо логотип торкається країв, частина контенту пропаде. Ми проектуємо foreground так, щоб ключові елементи (літери, графіка) поміщалися в безпечній зоні. Це гарантує читабельність на будь-якому пристрої.
Адаптивні іконки дозволяють лаунчерам створювати єдиний візуальний стиль, застосовуючи власну маску до двошарової іконки. — Android Developer Documentation
Як ми робимо Adaptive Icons
Основний підхід — VectorDrawable для foreground. Він масштабується без втрати якості, займає в 10 разів менше місця, ніж PNG, і підтримує анімацію. Фон задаємо через ic_launcher_background.xml із плоским кольором — це зменшує розмір APK на 2–3 КБ порівняно з PNG-фоном.
| Характеристика | VectorDrawable | PNG |
|---|---|---|
| Розмір файлу (foreground) | ~1–3 КБ | 20–100 КБ (xxxhdpi) |
| Масштабування | Без втрат | З артефактами при збільшенні |
| Монохромний шар | Легко додати | Потрібен окремий PNG |
| Анімація | Підтримується | Не підтримується |
Структура ic_launcher.xml:
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@color/ic_launcher_background"/> <foreground android:drawable="@drawable/ic_launcher_foreground"/> <monochrome android:drawable="@drawable/ic_launcher_monochrome"/> </adaptive-icon> Шпаргалка за розмірами Adaptive Icon
| Елемент | Розмір | Примітка |
|---|---|---|
| Повний canvas | 108×108 dp | Основний контейнер |
| Зона безпеки (foreground) | 66×66 dp | Ключовий контент всередині |
| Legacy PNG (mdpi) | 48×48 px | Для Android < 8.0 |
| Legacy PNG (hdpi) | 72×72 px | |
| Legacy PNG (xhdpi) | 96×96 px | |
| Legacy PNG (xxhdpi) | 144×144 px | |
| Legacy PNG (xxxhdpi) | 192×192 px | |
| Google Play Store | 512×512 px | Без заокруглень |
Як підготувати монохромну іконку?
Монохромна іконка — це векторний drawable, який містить лише силует, без кольорової інформації. Система сама застосує tint з теми. Важливо: всі елементи повинні бути одного кольору (зазвичай білого або чорного). Ми створюємо його на основі foreground, спрощуючи деталі до рівня, читабельного в маленькому розмірі.
Типові помилки та як їх уникнути
- Вихід за зону безпеки: перевіряйте, що всі значущі елементи поміщаються в 66×66 dp. Використовуйте макети з накладанням маски.
- Пропуск монохромного шару: додавайте
ic_launcher_monochrome— це продовжує життя іконки в Android 13+. - Використання JPG або неоптимізованого PNG: конвертуйте в VectorDrawable, якщо немає градієнтів.
- Неправильна іконка для Google Play: подавайте окремий 512×512 PNG без заокруглень — магазин сам застосовує маску.
Процес роботи
- Аналіз фірмового стилю та вимог Google Play.
- Дизайн 3–5 концепцій у векторному редакторі з урахуванням зони безпеки.
- Експорт шарів: foreground (VectorDrawable), background (колір), монохром (VectorDrawable).
- Legacy PNG: конвертація в mipmap-щільності (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).
- Формування Play Store Icon (512×512 PNG) без обводки.
- Перевірка на трьох реальних пристроях з різними лаунчерами.
Що входить в роботу
За результатами проекту ви отримуєте:
- вихідні векторні файли (SVG або AI);
- адаптивний пакет для Android (foreground, background, монохром);
- legacy PNG всіх щільностей для mipmap;
- іконку для Google Play (512×512);
- інструкцію з інтеграції в проект.
Наші гарантії та досвід
Ми розробили іконки більш ніж для 50 Android-додатків за 5+ років роботи. Гарантуємо: іконка пройде перевірку Google Play Console, не буде обрізатися на пристроях Samsung, Xiaomi, Pixel та буде підтримувати темну тему. При необхідності доопрацьовуємо рішення до повної сумісності з вашим лаунчером. Отримайте професійну іконку для вашого додатку — замовте розробку в нашій команді.
Строки та вартість
Орієнтовні строки — від 4 годин до 2 днів залежно від складності концепції та кількості ітерацій. Вартість розраховується індивідуально під ваш проект — оцінимо його безкоштовно. При правильному проектуванні іконки можна уникнути до 30% додаткових витрат на доопрацювання. Зв'яжіться з нами, щоб обговорити деталі та отримати консультацію.
Докладніше про Adaptive Icons читайте в офіційній документації Android.