Toolbye

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

Все инструменты

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

Загрузите PNG или SVG и получите favicon, PWA и app-иконки с автоматическими отступами и безопасной зоной.

Загрузка PNG или SVG

Поддерживаются PNG и SVG. Рекомендуется прозрачный PNG или простой статичный SVG, размер от 512×512.

Перетащите PNG/SVG сюда

или нажмите для выбора файла

Настройки

Режим отступов

Режим фона

Скругление предпросмотра

Цвет фона

Настройки manifest

Предпросмотр

Исходное изображение

Загрузите PNG или SVG для предпросмотра.

Определенные границы объекта

Загрузите PNG или SVG для предпросмотра.

Предпросмотр favicon

—

Предпросмотр Apple

—

Предпросмотр PWA

—

Предпросмотр maskable

—

Выходные файлы

Файлы генерируются автоматически и доступны по отдельности или в ZIP.

favicon-16x16.png

16×16

favicon-32x32.png

32×32

favicon-48x48.png

48×48

apple-touch-icon.png

180×180

icon-192x192.png

192×192

icon-512x512.png

512×512

icon-maskable-192x192.png

192×192

icon-maskable-512x512.png

512×512

icon-256x256.png

256×256

icon-1024x1024.png

1024×1024

favicon.ico

48×48

site.webmanifest

JSON

Скачать

Скачайте полный ZIP-пакет, manifest или отдельные файлы.

{
  "name": "Toolbye App",
  "short_name": "Toolbye",
  "theme_color": "#2563eb",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "icon-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icon-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Как использовать

  1. Загрузите PNG или SVG, инструмент автоматически определит границы объекта.
  2. Выберите режим отступов и фон, проверьте preview favicon/app/maskable.
  3. Скачайте ZIP-пакет (PNG, favicon.ico и web manifest).

Разница между favicon, PWA и maskable

Favicon

Маленькая иконка вкладки браузера, важны четкий силуэт и отступы.

PWA-иконка

Иконка для установки web app на домашний экран.

Maskable-иконка

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

Частые ошибки

Контент вплотную к краю

На разных платформах иконка может обрезаться, если нет отступов.

Слишком много пустой прозрачной области

Иконка выглядит слишком маленькой, если вокруг объекта слишком много пустоты.

Неверный формат файла

Поддерживаются PNG и SVG. Для сложного SVG лучше использовать упрощенную версию или PNG.

Слишком маленький исходник

Низкое разрешение ухудшает качество иконок 512/1024.

Изображение отправляется на сервер?

В текущей реализации анализ, генерация, manifest и ZIP выполняются в браузере.

Во время обычного использования изображение не отправляется во внешний API обработки.

FAQ

Какие форматы поддерживаются?

PNG и SVG. Лучше использовать прозрачный PNG или простой статичный SVG.

Почему нельзя заполнять иконку до краев?

Иконки по-разному обрезаются на платформах, нужны безопасные отступы.

В чем разница favicon и app icon?

Favicon для вкладок браузера, app icon для установки и лаунчера.

Что такое maskable icon?

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

Моя картинка загружается на сервер?

В обычном потоке обработка выполняется локально в браузере.

Какой размер исходника лучше?

Минимум 512×512, желательно 1024×1024 и выше.

Почему прозрачный PNG лучше?

Прозрачность помогает точно определить реальные границы объекта.

Можно ли перекрасить SVG-иконку?

Да. Переключите цвет иконки в режим «Пользовательский» и выберите preset или HEX-цвет (однотонная заливка).

Связанные инструменты