Перейти к содержимому

Генератор иконок для Xcode, Android и сайтов

В разработке  Будет доступно скоро

Генератор иконок создаёт готовые наборы иконок для платформ Apple, Android и сайтов из одного изображения. Загрузите логотип или создайте новый исходник с помощью AI, настройте его отображение, проверьте все размеры в предпросмотре и скачайте только нужные ресурсы.

Генератор автоматически подготовит правильные размеры, имена файлов, структуру папок и файлы конфигурации для каждой выбранной платформы.

Генератор иконок
Генератор иконок

Загрузите файл PNG, JPG, JPEG или WebP через диалог выбора либо перетащите его в окно генератора.

Для наилучшего результата используйте качественное квадратное изображение размером 1024×1024 px. Если у исходника другое соотношение сторон, его можно обрезать прямо в редакторе. Изображения меньшего размера тоже поддерживаются, но при увеличении очень маленький исходник может выглядеть менее чётко.

Одно изображение можно использовать сразу для всех выбранных платформ. Перед экспортом его можно заменить или удалить.

Генерация иконки с помощью AI

Section titled “Генерация иконки с помощью AI”

Вместо загрузки готового изображения исходную иконку можно создать с помощью AI. Генератор подготовит несколько вариантов по текстовому описанию. После выбора один из них станет общим исходником для всех выбранных платформ Apple, Android и сайтов, а затем пройдёт тот же процесс обрезки, предпросмотра и экспорта, что и загруженная картинка.

Чтобы создать иконку:

  1. В блоке Источник выберите AI.
  2. В поле Описание расскажите о приложении и желаемой иконке.
  3. Выберите доступную модель генерации изображений.
  4. Укажите количество вариантов — от 1 до 4.
  5. Нажмите Создать.
  6. Выберите понравившийся вариант и нажмите Применить.
Генерация иконки
Генерация иконки

Применённое изображение заменит текущий исходник и автоматически будет приведено к размеру 1024×1024 px. После этого созданные варианты очистятся, а генератор перейдёт к настройкам платформ и экспорту.

Как составить хорошее описание

Section titled “Как составить хорошее описание”

Укажите назначение приложения, основной объект или символ, желаемые цвета, стиль, настроение и ограничения по композиции. Сосредоточьтесь на одном узнаваемом символе и избегайте текста или мелких деталей, которые могут исчезнуть при уменьшении иконки. Важные элементы лучше располагать ближе к центру, чтобы платформенные маски их не обрезали.

Например:

Иконка приложения для управления задачами. Белая галочка внутри синего круга, минималистичный стиль, насыщенный синий градиент, высокий контраст, без текста и мелких деталей.

Каждый запрошенный вариант сохраняет основную идею, но может отличаться символом, композицией, цветовой схемой, расположением элементов или визуальной обработкой. Варианты появляются по мере готовности, а на экране отображается текущий прогресс, например 2 / 4.

Выбор модели и настройка prompt

Section titled “Выбор модели и настройка prompt”

Если настроено несколько AI-провайдеров, можно выбрать модель генерации изображений. На кнопке отображается провайдер, а полное название модели доступно в подсказке. Список моделей зависит от подключённых AI-провайдеров и настроек учётной записи пользователя.

Полный шаблон prompt находится в разделе Настройки. По умолчанию он просит модель создать квадратную иконку с выразительным центральным символом, высоким контрастом и композицией, которая останется понятной в маленьком размере, без лишнего текста и внешних изображений.

В шаблоне используется переменная {description}. При генерации она заменяется содержимым поля Описание. Изменять шаблон стоит только тогда, когда нужен более точный контроль над стилем или форматом результата.

Выбор, применение и отмена генерации

Section titled “Выбор, применение и отмена генерации”

Созданные варианты отображаются отдельными карточками. Нажатие на карточку выбирает или отменяет выбор, а кнопка Применить становится доступной после выбора одного варианта.

Текущую генерацию можно отменить через индикатор длительной операции. Уже готовые варианты сохранятся и останутся доступными для выбора.

AI создаёт исходное изображение, а не отдельные файлы всех платформ. После нажатия Применить генератор подготовит квадратный исходник, назначит его выбранным платформам, создаст предпросмотр, рассчитает необходимые размеры и масштабы, применит поддерживаемые маски и отступы, а затем подготовит наборы Xcode, Android и Web для скачивания.

Создание исходника через MCP

Section titled “Создание исходника через MCP”

Генератор иконок также поддерживает работу с локальным AI Companion (MCP). Подключите ChatGPT, Claude, Cursor или другой MCP-клиент к ASO.dev, а затем попросите ассистента создать изображение для иконки приложения.

Например:

Создай квадратное исходное изображение для иконки приложения управления задачами: белая галочка внутри синего круга, минималистичный стиль, высокий контраст, без текста и мелких деталей.

После того как MCP-клиент создаст изображение:

  1. Сохраните или экспортируйте картинку из AI-клиента.
  2. Откройте Генератор иконок и выберите Загрузка в блоке Источник.
  3. Загрузите созданный файл или перетащите его в интерфейс.
  4. При необходимости обрежьте изображение и выберите платформы.
  5. Проверьте готовые размеры и скачайте одну платформу либо полный набор для Xcode, Android и Web.

MCP создаёт исходное изображение, но не заменяет подготовку платформенных ресурсов в интерфейсе. После загрузки картинка проходит тот же процесс оптимизированного изменения размера, предпросмотра, скругления и экспорта, что и любой другой исходный файл.

Обрезка и скругление углов

Section titled “Обрезка и скругление углов”

Инструмент Обрезка позволяет выбрать часть исходного изображения, которая должна попасть в иконку. Это удобно, если логотип не квадратный или вокруг него есть лишнее свободное пространство.

Для разных платформ доступны дополнительные настройки формы:

  • включение или отключение скругления углов для классических иконок Android;
  • включение или отключение скругления для PNG- и ICO-файлов сайта;
  • добавление необходимого отступа вокруг иконки macOS;
  • выравнивание изображения слева, по центру или справа для широкого формата tvOS.

В предпросмотре также отображаются системные маски: круглые иконки watchOS и visionOS, а также скруглённые формы Apple. Некоторые маски нужны только для демонстрации того, как иконка будет выглядеть в системе. Они не добавляются в сам PNG, если итоговую форму применяет операционная система.

Можно создать иконки для любого сочетания платформ:

  • iPhone и iPad;
  • macOS;
  • watchOS;
  • tvOS;
  • visionOS;
  • Android;
  • сайт.

Необязательно каждый раз создавать полный комплект. Например, если для проекта нужны только иконки Apple Watch, можно выбрать и скачать один набор watchOS.

Предпросмотр готовых файлов

Section titled “Предпросмотр готовых файлов”

Предпросмотр показывает, как иконка будет выглядеть на каждой выбранной платформе. В разделе Предпросмотр → Файлы можно увидеть все создаваемые PNG-файлы, их названия, размеры, плотность или масштаб.

Из подробного предпросмотра можно:

  • проверить результат для каждого разрешения;
  • скачать один PNG-файл;
  • скачать одну платформу или группу иконок;
  • проверить все ресурсы перед созданием общего архива.

Так можно заранее заметить неправильную обрезку, слишком сильное скругление или детали, которые становятся неразличимыми в маленьком размере.

Оптимизированное изменение размера и сжатие

Section titled “Оптимизированное изменение размера и сжатие”

Генератор отдельно изменяет размер исходника для каждого разрешения, предусмотренного выбранными платформами. Обработка оптимизирована так, чтобы максимально сохранить чёткие края, цвета и прозрачность даже в маленьких иконках.

После изменения размера PNG-файлы проходят сжатие без потерь. Оно уменьшает размер файлов, не создавая артефактов и не вызывая дополнительной потери качества изображения.

В меню Скачать можно выбрать нужный комплект:

  • Apple / Xcode — каталог ресурсов с PNG-файлами необходимых размеров и метаданными Contents.json;
  • Android — иконки запуска, ресурсы mipmap, передние слои адаптивных иконок, XML-файлы конфигурации и иконка для Google Play;
  • Сайт — фавиконки PNG, файл favicon.ico и Web Manifest;
  • Все платформы — все выбранные наборы, разложенные по отдельным папкам вместе с файлами конфигурации для Xcode, Android и Web.

Отдельную платформу или файл также можно скачать прямо из подробного предпросмотра. Во время экспорта отображаются текущий файл и общий прогресс подготовки.

Добавление иконок в проект

Section titled “Добавление иконок в проект”

Для Xcode добавьте скачанный набор App Icon в каталог Assets.xcassets проекта и выберите его в качестве App Icons Source для нужной цели сборки.

Для Android скопируйте созданные ресурсы в соответствующие папки res проекта. В архиве уже находятся каталоги mipmap для каждой плотности экрана и конфигурация адаптивных иконок.

Для сайта добавьте фавиконки и манифест в публичную папку проекта. Если фреймворк не подключает их автоматически, укажите ссылки на файлы в разделе <head> страницы.