UTILS.
100% в браузере
📱

Генератор Web App Manifest (PWA)

Создайте валидный манифест PWA (manifest.json) с иконками, цветами темы и режимом отображения, плюс готовый к вставке тег link rel=manifest.

— результат появится здесь —
— результат появится здесь —

Об этом инструменте

Генератор Web App Manifest создаёт валидный manifest.json для прогрессивного веб-приложения из простой формы, затем выдаёт вам сопутствующие HTML-теги для вставки в <head> страницы. Всё собирается в вашем браузере, и ничего не загружается — вы можете скопировать JSON, скачать его как manifest.json или скопировать теги link и meta.

Веб-манифест — это JSON-файл, позволяющий устанавливать сайт на главный экран и запускать его как нативное приложение. Этот инструмент собирает стандартные ключи — name, short_name, description, start_url, scope, display (standalone, fullscreen, minimal-ui или browser), orientation, theme_color, background_color и массив icons — опуская любое оставленное пустым поле, чтобы вывод оставался чистым. Каждый отмеченный размер иконки становится записью с её src, sizes и type (выведенным из расширения файла), а опциональный purpose позволяет пометить иконки как maskable. Результат сериализуется через JSON.stringify с отступом в два пробела, поэтому он читаем и соответствует стандартам.

Используйте плейсхолдер {size} в пути к иконке (например, /icons/icon-{size}.png), и он заменяется каждым размером, таким как 192x192 и 512x512. Как минимум манифест должен включать name, start_url, режим display и хотя бы иконки 192px и 512px, которые здесь заданы по умолчанию. Ссылайтесь на него со страницы сгенерированным тегом <link rel="manifest"> и добавьте meta theme-color для интерфейса браузера.

Часто задаваемые вопросы

Что такое web app manifest?
Это JSON-файл, описывающий ваше прогрессивное веб-приложение — его имя, иконки, цвета и то, как оно должно запускаться — чтобы браузеры могли предложить установить его на главный экран и открыть в окне в стиле приложения.
Какие поля обязательны?
Полезному манифесту нужны хотя бы name (или short_name), start_url, режим display и иконки 192x192 и 512x512. Этот генератор заполняет их по умолчанию; остальные поля необязательны и опускаются, если оставлены пустыми.
Что означает 'maskable' для иконок?
Иконки maskable имеют безопасные отступы, чтобы платформы могли обрезать их в круги, сквиркли или скруглённые квадраты, не обрезая ваш логотип. Задайте purpose как 'maskable' или 'any maskable' для иконок, спроектированных с такой безопасной зоной.
Как установить манифест на моём сайте?
Сохраните JSON как manifest.json, загрузите его на сайт, затем добавьте сгенерированные <link rel="manifest" href="/manifest.json"> и meta-теги theme-color в <head> каждой страницы.

Больше инструментов