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

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

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

  • Бесплатно
  • Без входа
  • PNG и SVG исходники
  • Favicon и PWA вывод

Рабочая область генерации иконок

Загрузите PNG или SVG, настройте отступы, фон, manifest, предпросмотр и скачивание в основном блоке.

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

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

PNG / SVG

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

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

Настройки

Загрузите PNG или SVG, настройте отступы, фон, manifest, предпросмотр и скачивание в основном блоке.

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

Режим фона

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

Цвет фона

Настройки manifest

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

Режим отображения

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

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

PNG / SVG

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

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

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

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

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

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

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

—

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

—

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

—

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

—

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

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

0/12

Скачать

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

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

4

favicon-16x16.png

16×16

favicon-32x32.png

32×32

favicon-48x48.png

48×48

favicon.ico

48×48

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

1

apple-touch-icon.png

180×180

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

2

icon-192x192.png

192×192

icon-512x512.png

512×512

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

2

icon-maskable-192x192.png

192×192

icon-maskable-512x512.png

512×512

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

3

icon-256x256.png

256×256

icon-1024x1024.png

1024×1024

site.webmanifest

JSON

Настройки 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

1

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

PWA-иконка

2

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

Maskable-иконка

3

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

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

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

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

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

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

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

Поддерживаются 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-цвет (однотонная заливка).

Сценарии использования

Генерация favicon и PWA-иконок

Из одной исходной картинки получите favicon.ico, Apple touch icon и стандартные PWA-файлы.

Открыть сценарий

Настройка safe-area для maskable

Сохраните важный контент в безопасной зоне, чтобы снизить риск обрезки на Android.

Открыть сценарий

Пакет иконок из SVG

Используйте один SVG и экспортируйте favicon, app-иконки, manifest и ZIP.

Открыть сценарий

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

Toolbye

Быстрая генерация иконок прямо в браузере.