Как собрать пакет иконок из SVG

Загрузите SVG, настройте цвет и отступы, затем экспортируйте favicon, app-иконки, manifest и ZIP.

Рекомендации по SVG

  • Используйте статичный SVG без скриптов, foreignObject и внешних ресурсов.
  • Чем проще векторная структура, тем стабильнее рендер в разных размерах.
  • Если результат отличается от ожиданий, упростите SVG или перейдите на PNG.

Поток из 3 шагов

  1. Загрузите SVG и проверьте preview источника и обнаруженных границ.
  2. Выберите режим цвета (исходный/пользовательский) и нужный padding mode.
  3. Скачайте ZIP с favicon, Apple/PWA/maskable PNG и site.webmanifest.

Полный пример

Вход: Одноцветный SVG-логотип для SaaS-сайта.

Настройки: Пользовательский цвет #2563eb + Balanced padding + прозрачный фон.

Выход: Единый стиль цвета и отступов на всех экспортированных размерах.

FAQ

Сохраняются ли сложные SVG-фильтры без изменений?

Не всегда. Сложные фильтры и внешние шрифты могут отличаться после растеризации.

Как работает пользовательский цвет для SVG?

Инструмент применяет однотонную заливку по alpha-маске отрендеренного SVG.

Можно ли получить favicon.ico из SVG?

Да. SVG сначала рендерится в canvas, затем используется общий PNG/ICO pipeline.

Когда использовать исходный цвет, а когда пользовательский?

Исходный — когда бренд-цвет уже готов; пользовательский — для единой однотонной системы.

Связанные переходы