Перейти до вмісту

Створити іконки застосунку для iOS і Android

Перетворіть одне зображення на іконки всіх розмірів для iOS, Android, PWA і фавікон, з каталогом ресурсів Xcode та шарами адаптивної іконки. Архів ZIP створюється у вашому браузері.

Перетягніть зображення іконкиPNG, JPG, WebP або SVG · найкраще підходить зображення від 1024 × 1024 px · до 50 MB
Вибрати файлОбробка на вашому пристрої — без надсилання на сервер

З одного зображення вийде іконок PNG для iOS, Android і вебу: 39, а також Contents.json, XML адаптивної іконки, favicon.ico і вебманіфест. Усе створюється у вашому браузері.

Працює у браузері · без надсилання на серверЯк це працює

Як користуватися: Генератор іконок застосунків

  1. 1

    Додайте зображення

    Перетягніть квадратний файл PNG, JPG, WebP або SVG, найкраще розміром від 1024 × 1024 пікселів; логотип із прозорим тлом теж підійде.

  2. 2

    Оберіть платформи

    Залиште iOS, Android і «Веб і PWA» або приберіть позначки з тих, для яких ви не випускаєте застосунок. Також виберіть повний набір розмірів Xcode чи одну іконку 1024 px.

  3. 3

    Налаштуйте вигляд

    Задайте відступ, колір тла та розмір зображення всередині адаптивних і maskable-іконок, звіряючись із напрямними безпечної зони та формами лаунчерів.

  4. 4

    Завантажте ZIP

    Натисніть «Завантажити ZIP» і скопіюйте кожну папку у свій проєкт; у файлі README написано, куди який файл покласти.

Ліміти та Pro

Безкоштовно й без водяних знаків: одне вихідне зображення до 50 MB за раз, до 44 іконок PNG в одному ZIP (39 за замовчуванням, ще 5 із шаром тематичної іконки), необмежена кількість завантажень.

Про інструмент: Генератор іконок застосунків

Генератор іконок застосунків перетворює одне зображення на повний набір іконок, потрібний мобільному застосунку або прогресивному вебзастосунку (PWA). Файли названо й розкладено по папках так, як очікують Xcode, Android Studio і браузери. Якщо вибрано всі платформи, у ZIP потрапляє 39 файлів PNG: 15 для каталогу ресурсів iPhone та iPad разом з іконкою App Store 1024 px, 15 зображень лаунчера Android для щільностей від mdpi до xxxhdpi, іконка Google Play 512 px і 8 веб-іконок: розміри маніфесту 192 і 512 px, їхні maskable-версії, apple-touch-icon 180 px та фавікони 16, 32 і 48 px.

До зображень додаються Contents.json для AppIcon.appiconset, XML-файл mipmap-anydpi-v26 для адаптивних іконок Android 8 із ресурсом кольору тла, favicon.ico із трьома розмірами, блок icons для manifest.webmanifest і теги link для HTML. Файли для iOS записуються без альфа-каналу, бо Xcode відхиляє іконки App Store з ним, а кожен розмір зменшується з майстер-зображення 1024 px поступово, удвічі, щоб дрібні іконки залишалися чіткими.

Інструмент не створює дизайн іконки й не видаляє тло, а для адаптивного шару тла використовує суцільний колір, а не друге зображення. Попередній перегляд у формах «Сквиркл», «Крапля» та коло імітує поширені лаунчери; кожен виробник телефонів малює власну маску, тож перевірте результат на справжньому пристрої.

Приватність

Ваше зображення розкодовується, змінюється за розміром і пакується в ZIP у цій вкладці браузера за допомогою canvas і локального Web Worker, тож воно не залишає ваш пристрій, нічого не надсилається на сервер і не зберігається.

Можливості

Каталог ресурсів Xcode

AppIcon.appiconset із Contents.json, усі розміри для iPhone та iPad, PNG без альфа-каналу.

Адаптивні іконки Android

Шари переднього плану, ресурс кольору тла, круглі іконки, тематичний шар і Play Store 512.

PWA і фавікони

Іконки маніфесту, maskable-версії, apple-touch-icon, favicon.ico і готові теги HTML.

Генератор іконок застосунків: поширені запитання

Якого розміру має бути вихідне зображення?
Використовуйте квадратне зображення щонайменше 1024 × 1024 пікселів: це розмір іконки App Store і найбільшого файлу в наборі. Менші зображення теж підійдуть, але великі іконки буде збільшено, тож вони матимуть нечіткий вигляд, а інструмент про це попередить. SVG малюється в повній роздільності, тому векторний логотип завжди дає чіткий результат у кожному розмірі.
Куди покласти файли в проєкті Xcode?
Відкрийте Assets.xcassets у Xcode, видаліть наявний набір AppIcon і перетягніть туди папку ios/AppIcon.appiconset із ZIP або замініть цю папку у Finder. Файл Contents.json зіставляє кожен PNG зі слотом iPhone, iPad чи App Store. Якщо проєкт орієнтований на Xcode 14 або новіший, можна обрати Single 1024, і Xcode сам створить менші розміри.
Як працюють адаптивні іконки Android?
Починаючи з Android 8 іконка лаунчера складається з двох шарів по 108 dp: тла, тут це вибраний вами колір, і переднього плану із вашим зображенням. Лаунчер обрізає центральні 72 dp і застосовує власну форму, наприклад коло чи сквиркл, тож усе поза центральним колом 66 dp може зникнути. Напрямні безпечної зони показують ці дві межі на попередньому перегляді.
Що таке maskable-іконка для PWA?
Maskable-іконка заповнює весь квадрат тлом, щоб Android міг обрізати її до будь-якої форми без білих країв. Браузери гарантують видимість лише кола, що охоплює центральні 80% зображення, тому тримайте логотип усередині нього. У ZIP є maskable-файли PNG 192 і 512 px, а фрагмент маніфесту позначає їх purpose maskable поруч зі звичайними іконками.
Чому іконки iOS мають колір тла?
Apple вимагає, щоб іконки застосунків були повністю непрозорими: іконка App Store з альфа-каналом не проходить перевірку, а прозорі ділянки на головному екрані стали б чорними. Тому інструмент заливає вашим кольором тла іконки iOS, apple-touch-icon, іконку Play Store, адаптивні та maskable-іконки, навіть коли ввімкнено «Прозорі веб-іконки».

Схожі інструменти

Усі інструменти: інструменти для розробників

Генератор фавіконок

Піктограми ICO, PNG і маніфест із зображення, тексту чи емодзі

Конвертер SVG ↔ PNG

SVG у чіткий PNG або PNG у SVG-вектор

Зміна розміру зображень

Розмір у пікселях, відсотках або за шаблоном — пакетно

Генератор палітр і перевірка контрасту

Палітри, відтінки, контраст WCAG і перевірка для дальтоніків