Розміри іконки застосунку й альфа-канал: App Store і Play

У вас один логотип і два магазини застосунків, і файл, який влаштовує Apple, — це не той файл, якого хоче Google. Виявляється це в найгірший момент: збірка готова, а завантаження раз за разом падає через альфа-канал.

Apple потрібна квадратна іконка 1024x1024 з непрозорим фоном. Play потрібен 32-bit PNG розміром 512x512, який технічно підтримує альфу, але, за власною дизайн-специфікацією Google, використовувати її не варто. І жодному з магазинів не потрібен файл із «готовим» виглядом — обидва накладають власні кути й ефекти вже після завантаження. Ось що вимагає кожен із них і як отримати обидва файли з одного логотипа.

Apple: 1024 пікселі, квадрат, нічого прозорого

Human Interface Guidelines від Apple визначають розмір макета іконки застосунку для iOS, iPadOS і macOS як 1024x1024 px, квадрат, у sRGB, Gray Gamma 2.2 або Display P3. Тепер Apple радить іти через Icon Composer, де ви імпортуєте шари переднього плану, а фон задаєте вже в самому інструменті, — але сплющене зображення теж дозволене: шари дають більше контролю, обов’язковими вони не є.

Новачків зупиняє саме фон. Вказівка Apple щодо імпортованого шару фону пряма: він має бути на всю площу, без полів, і непрозорий. PNG 1024px із прозорим фоном — недійсна іконка для App Store: завантажте таку, і App Store Connect поверне ITMS-90717: the App Store icon can't be transparent or contain an alpha channel. Єдиний виняток — варіант для темного оформлення: його Apple просить подавати саме з прозорим фоном, щоб крізь нього проглядав системний фон. В усіх інших випадках вирішіть, який колір стоїть за вашим знаком, і закладіть його в сам файл.

Інші платформи Apple змінюють розмір макета: watchOS — 1088x1088, visionOS — 1024x1024, обидві з круглою маскою, а tvOS — горизонтальні 800x480. Змінюється й метод: іконки для tvOS і visionOS збирають як шаруваті стеки зображень у Xcode, а не в Icon Composer.

Google Play: 512 пікселів, альфа дозволена, прозорість усе одно помилка

Іконка для сторінки застосунку в Play — це 32-bit PNG з альфа-каналом, 512x512 px, sRGB, максимум 1024KB. Прочитаєте це окремо — і прозора вирізка, яка у вас уже є, здасться цілком придатною.

Дизайн-специфікація іконок від Google зачиняє ці двері: прозорі ресурси показують колір фону інтерфейсу Google Play. Ваш знак тоді висить на тій поверхні, яку Play вирішить намалювати, а темний логотип зникає в темній темі. Порада Google: візьміть колір фону, який пасує вашому бренду.

Ще два правила Play: жодних бейджів чи тексту з натяком на рейтинг, ціну або категорії Play, а іконка для сторінки в магазині — це не іконка запуску на пристрої. Та адаптивна іконка використовує шари 108x108 dp, і лише внутрішні 66x66 dp гарантовано не обріже маска виробника.

Як отримати обидва файли з одного логотипа

Обидва файли починаються з того самого: з вашого знака, чисто відділеного від того, на чому він лежав. Якщо логотип існує лише як JPEG від постачальника чи фото друкованого бланка, спершу виріжте його, щоб форма була ізольована зі справжнім альфа-каналом. remover.bg знімає знак із фону й дає покласти його на суцільний однотонний або власний фірмовий колір у редакторі — це і є той крок сплющення, якого вимагає Apple.

Порядок, який працює:

1. Приберіть фон, щоб логотип лишився сам по собі. Перевірте краї на темному кольорі, а не на білому — тонкі штрихи й засічки ховають свої вади на білому тлі попереднього перегляду.
2. Задайте фірмовий колір фону й експортуйте PNG. Прозору версію теж збережіть — для прескітів і фавіконів.
3. У своєму графічному редакторі покладіть цей PNG на квадратне полотно й експортуйте в 1024x1024 для Apple і 512x512 для Play. Змінювати розмір потрібно саме там, а не в інструменті видалення фону.

Для сканованого чи сфотографованого логотипа як видалити фон з логотипа розбирає складні випадки, а гайд про прозорий PNG пояснює, чому такий майстер-файл варто зберігати.

Хай магазини самі малюють кути й тінь

Play формулює це чітко: він сам заокруглює кути з радіусом 30% від розміру іконки, після завантаження додає власну тінь і просить вас не робити ні того, ні того. Apple маскує ваш квадрат у системний заокруглений прямокутник і накладає власні відблиски, заломлення й напівпрозорість, попереджаючи, що заздалегідь замасковані шари псують ці ефекти й роблять краї зубчастими.

Отже: жодних заздалегідь заокруглених кутів, жодної тіні, жодного скосу, жодного сяйва. Ця стриманість стосується саме іконок — на фото товару реалістична контактна тінь якраз і не дає предмету виглядати наліпленим.

Оскільки обидва магазини маскують, тримайте важливу частину знака по центру. Настанова Apple — центрувати основний вміст, щоб маска не могла його обрізати. Сітка ключових ліній (keylines) у Play працює не так, як усі думають: це орієнтир для розташування, а не межа. Google радить заповнювати графікою весь ресурс, коли це можливо, і повертатися до keylines лише тоді, коли форма навколо логотипа принципова для бренду. Додасте полів про всяк випадок — і ваша іконка виглядатиме помітно меншою за всі сусідні в списку.

Радіус у 30% насправді з’їдає саме кути, тож текстовий логотип (вордмарк), затиснутий у них, втрачає свої закінчення. На круглих масках watchOS і visionOS вордмарк від краю до краю відверто губить першу й останню літери.

Перед завантаженням

• Apple: PNG 1024x1024, квадрат, повністю непрозорий, кути залишити гострими.
• Play: 32-bit PNG 512x512, максимум 1024KB, фон фірмового кольору замість прозорості, кути залишити гострими.
• Однакова графіка й кольори в обох магазинах: користувачі мають упізнати один застосунок, а не два.
• Перегляньте обидва в розмірі мініатюри. Деталь, яка читається на 1024, зникає на 40 пікселях.

Розберіться з іконкою один раз — і вона лишиться правильною для кожного наступного релізу.