Skip to main content
iotools.cloudiotools.cloud

Generator Manifest Aplikasi Web PWA

Buat manifest.json untuk Aplikasi Web Progresif (PWA): nama, nama pendek, deskripsi, URL awal, ruang lingkup, mode tampilan, orientasi, warna tema/latar belakang, set ikon, dan kategori. Salin atau unduh manifest siap pakai plus tag HTML <link>.

Input

App Identity

Nama lengkap aplikasi yang ditampilkan pada prompt instalasi dan layar splash.

Digunakan di layar utama (disarankan: 12 karakter atau kurang).

Bahasa utama (tag BCP 47, misalnya en-US, fr, de-DE).

Navigation

URL yang dibuka saat aplikasi diluncurkan.

Batas navigasi untuk aplikasi (opsional).

Identitas unik untuk aplikasi (opsional, disarankan).

Display

Mewarnai bilah alat browser/bilah status saat aplikasi terbuka.

Warna latar belakang pada layar splash saat aplikasi dimuat.

Icons

Jalur folder (atau URL lengkap) tempat file ikon Anda berada.

Gunakan {size} sebagai placeholder — diganti dengan setiap ukuran yang dipilih.

Categorization

Kata kunci kategori toko aplikasi yang dipisahkan dengan koma (opsional).

Output

manifest.json
Tag Link HTML

Tambahkan ini di dalam <head> halaman Anda.

Apakah ini membantu?

Panduan

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.

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan