Зачем начинать с векторного логотипа?

Все файлы бренда — от иконки вкладки браузера в 16 px до картинки 1024 px для магазина приложений — должны получаться из одного исходника. Если исходник — PNG, каждый экспорт просто масштабирует пиксели: в мелких размерах всё расплывается, а в крупных остается мягким. Если это SVG из контуров, каждый размер отрисовывается заново. В шагах ниже в центре всегда один SVG, а всё остальное делается из него.

Логотип Study с совой в SVG, затем та же сова как иконка iOS со скругленными углами, адаптивная иконка Android в круге и favicon 32 px, увеличенный так, что видны пиксели

Один из наших примеров логотипов, а затем иконка iOS, адаптивная иконка Android и favicon, которые наши инструменты экспорта сделали из его SVG. Favicon показан увеличенным: в 32 px важен каждый пиксель.

Шаг 1: опишите логотип и выберите идею

Откройте ИИ-генератор логотипов и напишите, что должно быть на логотипе: «сова из кругов и треугольников для приложения для учебы, индиго и янтарный». Если на логотипе должно быть название бренда, добавьте его. Если вы знаете, какой логотип нужен, выберите стиль; руководство по стилям логотипов объясняет каждый. Каждая отправка дает четыре идеи, а цена заранее указана на кнопке.

Шаг 2: доработайте идею словами

Выберите идею, которая ближе всего к задуманному, и напишите, что изменить: «сделай R жирнее», «поменьше перьев», «подними солнце над вершиной». При доработке остальной логотип сохраняется. Лучше одна-две точные правки за раз, чем список из десяти.

Шаг 3: векторизуйте

Нажмите Векторизовать на выбранном логотипе. Он пройдет трассировку в SVG, где у каждого цвета свои контуры, и прежде чем использовать результат, его можно сравнить с оригиналом. Откройте его в SVG-редакторе, чтобы перекрасить часть, удалить случайную фигуру или поправить интервалы в названии.

Прежде чем идти дальше, проверьте три вещи. Читается ли знак в маленьком размере? Не касаются ли друг друга фигуры или буквы, которые не должны? Точно ли это те цвета, которые нужны? Исправив это сейчас в SVG, вы исправите все файлы, которые из него получатся.

Шаг 4: сделайте иконки приложения

Генератор иконок приложений делает из SVG:

  • Android: PNG для разных плотностей экрана от 48 до 192 px, изображение 512 px для Play Store и XML адаптивной иконки — с передним планом внутри безопасной зоны и монохромным слоем для тематических иконок;
  • iOS: AppIcon.appiconset с одним непрозрачным изображением 1024 px для Xcode.

Выберите цвет фона и отступ вокруг знака. Если вокруг знака есть прозрачное пространство, монохромная иконка Android получит его настоящую форму. О том, как импортировать файлы и что проверить на устройстве, рассказано в руководстве «Иконки приложения для Android и iOS из одного изображения».

Шаг 5: сделайте favicon и иконки PWA

Генератор favicon делает favicon.ico (16, 32 и 48 px в одном файле), favicon.svg, если графика состоит из чистых векторных контуров, PNG в 16 и 32 px, Apple touch icon 180 px, иконки 192 и 512 px вместе с maskable-версиями, site.webmanifest и HTML, который нужно вставить в <head> страницы. Какие из них используют браузеры и почему favicon по-прежнему нужен ICO, объясняется в руководстве «SVG, PNG или ICO для favicon», а про безопасную зону maskable-иконок — в руководстве «Maskable-иконки PWA».

Или всё сразу: брендкит

Брендкит запускает те же инструменты экспорта на том же SVG с одним набором настроек бренда (название, короткое имя, цвет темы, цвет фона и отступ) и складывает результат в один ZIP:

Папка Что внутри
favicon/ favicon и иконки PWA
app-icons/ наборы иконок приложения для Android и iOS
ios/ набор изображений Xcode, чтобы использовать логотип внутри приложения
android/ VectorDrawable, чтобы использовать логотип внутри приложения
png/ прозрачные PNG с длинной стороной 256, 512, 1024 и 2048 px
svg/ оптимизированный SVG и оригинал с полной точностью

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

Перед запуском

Проверьте свое название и похожие знаки в реестре товарных знаков каждой страны, где вы продаете. Сгенерированный логотип новый, но никто не сверяет его с зарегистрированными знаками. Храните SVG как основной файл и делайте новые размеры из него, а не из PNG.