PWA Icon & Manifest Generator

A PWA icon represents your web app when installed on a device.

Icons are used for:

• Home screen shortcuts
• App switchers
• Splash screens
• Browser UI

Each platform requires specific icon sizes and formats.
All icons are generated from a single source image.

A web app manifest is a JSON file that defines how your web app behaves when installed.

It includes:

• App name and short name
• Icons and sizes
• Display mode (standalone, fullscreen)
• Theme and background colors
• Start URL

Browsers use this file to install your app correctly.

A Progressive Web App combines the reach of the web with app-like features.

PWAs can:

• Be installed on devices
• Work offline
• Send push notifications
• Launch from the home screen

No. This tool generates all required icons from one image and references them correctly in the manifest.

Incorrect or missing icon sizes can result in:

• Blurry icons
• Failed installation prompts
• Platform fallback icons

Using the correct sizes ensures a consistent app experience.

The full name of your web app as shown during installation and in system UI.

• Use a clear, descriptive name
• Can be longer than short_name
• Example: ACME Shipping app

{
  "name": "ACME Shipping app"
}

Tip: Keep the name consistent with your site header and branding.

A shorter label used when there is limited space, such as on the home screen.

• Keep it short (often 8–12 characters)
• Avoid punctuation and long words
• Example: ACME

{
  "short_name": "ACME"
}

If short_name is missing, platforms may fall back to name and truncate it.

The primary brand color used by the browser UI in some contexts (for example the address bar theme on Android).

• Use your brand primary color
• Must be a valid CSS color (hex recommended)
• Example: #000000

{
  "theme_color": "#000000"
}

Tip: Use the same value as your HTML meta theme color when possible:

<meta name="theme-color" content="#000000">

The background color used while the app is launching, and sometimes for the splash screen background.

• Use a neutral surface color (often white or near-black)
• Should match your app shell background
• Example: #ffffff

{
  "background_color": "#ffffff"
}

Tip: If this differs a lot from your real app background, the launch transition can feel jarring.

Controls how your PWA appears when launched from the home screen.

Common options:

• standalone (recommended): looks like a native app, with minimal browser UI
• fullscreen: hides all browser UI (mostly used for games)
• minimal-ui: limited support across browsers
• browser: opens like a normal website tab

{
  "display": "standalone"
}

Recommendation: Use standalone for most PWAs.

The first page that opens when the PWA is launched.

• Often / or a dedicated app shell route like /app
• Can include query params for source tracking (optional)
• Must be within your app scope for best results

{
  "start_url": "/"
}

Tip: Keep this stable. Changing it can affect install behavior and caching strategies.

Defines which URLs are considered part of your PWA.

• Restricts navigation considered “inside” the installed app
• Best practice: set it to the directory that contains your app
• If omitted, many browsers infer it from start_url

{
  "scope_url": "/"
}

Examples:

• App lives at /app → set "scope": "/app/"
• Whole site is the app → set "scope": "/"

Tip: Use a trailing slash for directory scopes.

Maskable icon padding defines the safe area around your icon artwork for maskable PWA icons.

When an icon is marked as purpose: "maskable", the operating system is allowed to crop it into different shapes such as circles or squircles. Padding ensures that important parts of your icon are not clipped.

• Padding creates a safe area around the icon content
• Prevents logos and text from being cut off
• Recommended default: 20%
• Allowed range: 0%–30%

When to use lower padding values

• Your icon artwork already includes margins
• Minimal or geometric icon designs
• Experienced teams that control icon design

Important note

Using 0% padding is valid, but may result in clipping on some devices.
Always preview maskable icons across different shapes before publishing.