Skip to main content
iotools.cloudiotools.cloud

Генератор манифеста веб-приложения PWA

Создайте manifest.json для Progressive Web App (PWA): имя, краткое имя, описание, начальный URL, область видимости, режим отображения, ориентация, цвета темы/фона, набор иконок и категории. Скопируйте или загрузите готовый к использованию манифест плюс HTML-тег <link>.

Ввод

App Identity

Полное название приложения, отображаемое при запросе на установку и на экране заставки.

Используется на главном экране (рекомендуется: 12 символов или менее).

Основной язык (тег BCP 47, например en-US, fr, de-DE).

Navigation

URL, открываемый при запуске приложения.

Граница навигации для приложения (опционально).

Уникальный идентификатор приложения (опционально, рекомендуется).

Display

Окрашивает панель инструментов/строку состояния браузера при открытом приложении.

Цвет фона на экране заставки во время загрузки приложения.

Icons

Путь папки (или полный URL), где находятся ваши файлы иконок.

Используйте {size} в качестве заполнителя — будет заменено на каждый выбранный размер.

Categorization

Ключевые слова категорий магазина приложений, разделенные запятыми (опционально).

Вывод

manifest.json
HTML тег ссылки

Добавьте это внутри <head> вашей страницы.

Это было полезно?

Руководства

The PWA Web App Manifest Generator builds the manifest.json file that turns a website into an installable Progressive Web App. Fill in your app's name, navigation, display preferences, colors, and icon set, and the tool produces a valid, ready-to-use manifest you can copy or download — plus the <link> tag that wires it into your page. Everything runs in your browser; nothing you enter is sent to a server.

What a web app manifest does

A web app manifest is a JSON file that tells the browser (and the OS) how your PWA should look and behave once installed — the same way a native app has an icon, a name, and a launch behavior:

  • name / short_name — the full name shown on the install prompt and splash screen, and the shorter label under the home-screen icon.
  • start_url / scope — which page opens when the app launches, and which URLs stay "inside" the app rather than escaping to the browser.
  • display — how much browser chrome shows: standalone (app-like, no address bar) is the common choice; fullscreen hides everything; minimal-ui keeps a thin nav bar; browser behaves like a normal tab.
  • orientation — locks the screen to portrait, landscape, a specific rotation, or leaves it unset with any.
  • theme_color / background_color — theme_color tints the OS status bar and app switcher while open; background_color fills the splash screen while it loads.
  • icons — images the OS uses for the home-screen icon, splash screen, and task switcher, at several pixel sizes.
  • categories — optional keywords some app stores and directories use to classify PWAs (e.g. productivity, utilities).

How to use the tool

  1. Fill in Name and Short Name — at least one should be set for the manifest to be meaningful.
  2. Set Start URL (usually /) and, optionally, a Scope and App ID.
  3. Pick a Display Mode and Orientation matching how you want the app to feel when launched.
  4. Choose Theme Color and Background Color — any valid hex color.
  5. Under Icons, set the base path and filename pattern ({size} is a placeholder, e.g. icon-{size}.png), then check the sizes you have image files for. For installability, most browsers expect at least a 192×192 and a 512×512 icon.
  6. Copy the generated manifest.json to your site root, and copy the <link rel="manifest" ...> tag into your page's <head>.

The manifest updates live as you type — there's no separate "generate" step.

Do I need icons at every size?

No — only check the sizes you have real image files for. Skipping 192×192 and 512×512 specifically can prevent Chrome and Android from treating the site as installable, since those are the sizes most platforms rely on for the home-screen icon and splash screen.

What's the difference between scope and start_url?

start_url is the single page that opens when the app launches. scope is the boundary: links within scope stay inside the installed app's window; a link outside it opens in the regular browser. Leave scope blank and it defaults to the directory of start_url.

Why does orientation have "primary" and "secondary" variants?

portrait/landscape lock the general orientation and let the OS pick the natural rotation; the -primary/-secondary suffixes pin one specific rotation (e.g. landscape-primary vs. the upside-down landscape-secondary). Most apps only need the base value — the specific variants are for apps with a real reason to reject one rotation of an otherwise-symmetric orientation.

pwamanifest.jsonweb app manifestprogressive web appgeneratoricons

Use it from code

From 3 credits per call

REST API

curl -X POST https://api.iotools.cloud/v1/tool/pwa-web-app-manifest-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "appName": "IO Tools",
    "shortName": "IO Tools",
    "description": "Free online developer and SEO tools that run ent…",
    "lang": "en-US",
    "dir": "auto",
    "startUrl": "/",
    "scope": "/",
    "id": "/?source=pwa",
    "display": "standalone",
    "orientation": "any",
    "themeColor": "#464aff",
    "backgroundColor": "#ffffff",
    "iconsPath": "/icons/",
    "iconFilename": "icon-{size}.png",
    "iconType": "image/png",
    "iconPurpose": "any maskable",
    "size72": "",
    "size96": "true",
    "size128": "true",
    "size144": "true",
    "size152": "",
    "size192": "true",
    "size384": "",
    "size512": "true",
    "categories": "productivity, utilities"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `pwa-web-app-manifest-generator` tool (PWA Web App Manifest Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу