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

Загрузите PNG или SVG, просмотрите иконки для сайта и PWA и скачайте ZIP с favicon.ico, PNG-файлами и site.webmanifest.

Бесплатно
Без входа
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 или отдельные файлы.

Название приложенияКороткое имяЦвет темыЦвет фона

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

Стартовый URL

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

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

PNG / SVG

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

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

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

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

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

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

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

—

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

—

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

—

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

—

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

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

0/12

Скачать

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

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

favicon-16x16.png

16×16

favicon-32x32.png

32×32

favicon-48x48.png

48×48

favicon.ico

48×48

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

apple-touch-icon.png

180×180

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

icon-192x192.png

192×192

icon-512x512.png

512×512

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

icon-maskable-192x192.png

192×192

icon-maskable-512x512.png

512×512

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

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"
    }
  ]
}

Как использовать скачанный набор

В ZIP входят 10 иконок PNG, favicon.ico и site.webmanifest. Это ресурсы для сайта и PWA, а не готовый проект нативного приложения.

Файлы в ZIP

favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png
icon-192x192.png
icon-512x512.png
icon-maskable-192x192.png
icon-maskable-512x512.png
icon-256x256.png
icon-1024x1024.png
favicon.ico
site.webmanifest

Распакуйте ZIP и загрузите файлы на сайт. В примере все файлы размещаются в корне сайта.
Добавьте следующие ссылки в раздел head HTML-страниц.
Перед экспортом задайте название, цвета и стартовый адрес. Поместите site.webmanifest рядом с четырьмя PNG-иконками PWA, на которые он ссылается: пути отсчитываются от манифеста.
Откройте адреса иконок и манифеста, проверьте загрузку и вид на нужных устройствах. Одних иконок недостаточно для настройки устанавливаемого PWA.

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Для подпапки, например /icons/, измените ссылки HTML и оставьте манифест рядом с PNG. Укажите реальный адрес входа в приложение в start_url. Исходный SVG в ZIP не входит.

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

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

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

Favicon

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

PWA-иконка

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

Maskable-иконка

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

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

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

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

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

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

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

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

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

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

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

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

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

Частые вопросы

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

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

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

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

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

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

Что такое maskable icon?

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

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

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

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

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

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

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

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

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

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

Кодирование и декодирование Base64

Преобразование текста и изображений в Base64 и обратно.

Открыть инструмент

Форматирование JSON

Форматирование, минификация и проверка JSON.

Открыть инструмент

Конвертер меток времени

Быстрое преобразование timestamp и даты/времени.

Открыть инструмент