ToolMight LogoToolMight

PWA Manifest & Asset Generator

Visually configure your Web App Manifest, upload a high-resolution square logo, scale PWA-compliant icons client-side, and download the entire integrated codebase package in a single ZIP file.

Learn More About Progressive Web Apps (PWA)

Generate production-ready Web App Manifest (manifest.json) configurations and compile high-resolution browser-native icon asset bundles for Progressive Web Apps (PWA). Includes automatic canvas-based maskable icon generation with safe-zone padding and client-side ZIP packaging.

Web App Manifest specifications and essential schema fields

A Web App Manifest (manifest.json or manifest.webmanifest) is a W3C-standardized JSON file that informs browsers how your progressive web application should behave when installed on desktop or mobile devices. Key parameters include:
  • Name & Short Name: name is the full title displayed on installation banners and app managers. short_name is used on device home screens where space is restricted (keep under 12 characters to prevent truncation).
  • Start URL & Scope: start_url defines the launch route when an installed app is opened. scope defines the navigation boundary—any clicks navigating outside this path break out into standard browser tabs.
  • Display Mode: Set to standalone to remove browser toolbars and address bars, giving your web app a native window frame.
  • Theme & Background Colors: theme_color tints the OS status bar and task switcher, while background_color paints the canvas during the transition before your stylesheets load.
You can validate and format your generated manifest JSON structure with our JSON Formatter.
{
  "id": "/",
  "name": "Acme Workspace",
  "short_name": "Acme",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#534AB7",
  "background_color": "#ffffff",
  "lang": "en",
  "dir": "ltr"
}

How to Use the Builder

1

1. Configure app identity & presentation

Enter your application name, short name (under 12 chars), start URL, standalone display mode, orientation, and brand theme/background colors.

2

2. Upload source logo image

Drag and drop a high-resolution square image (PNG, JPG, SVG, WebP) into the upload area. The tool previews the logo and prepares safe-zone layouts.

3

3. Copy HTML head integration tags

Copy the provided <link rel='manifest'> and <meta name='theme-color'> tags and paste them inside the <head> block of your website template.

4

4. Download PWA ZIP bundle

Click Download PWA Assets (.zip) to pack manifest.json, all 10 resized icons (standard and maskable), and instructions.txt into a ready-to-deploy archive.

Frequently Asked Questions

A Web App Manifest is a JSON file (manifest.json) that provides browsers with metadata about your web application, including its name, icons, start URL, theme colors, and display mode, enabling it to be installed on desktop and mobile home screens.
Standard icons ('purpose: any') render as full squares. Maskable icons ('purpose: maskable') place the artwork inside an 80% safe-zone circle on a colored background, ensuring Android adaptive launchers can crop them into circles or squircles without cutting off the logo.
Different devices and surfaces require distinct pixel resolutions. Generating 72x72 through 512x512 ensures crisp iconography across legacy Android phones, tablet drawers, desktop taskbars, and high-DPI splash screen loaders.
Place manifest.json and the icons/ directory in the public root folder of your web server (e.g. /public/manifest.json and /public/icons/ in Next.js or Vite). They must be accessible at the root URL path.
Add <link rel='manifest' href='/manifest.json'> and <meta name='theme-color' content='#yourcolor'> inside the <head> section of all your HTML pages or root layout component.
iOS Safari supports basic manifest fields like name and display: standalone. However, for home screen icons, iOS requires an explicit <link rel='apple-touch-icon' href='/icons/icon-192x192.png'> tag in the HTML head.
Yes. Browsers require both a valid Web App Manifest and an active registered Service Worker with a fetch event handler to satisfy PWA installability criteria and fire the 'beforeinstallprompt' event.
Mobile operating systems (iOS and Android) have limited screen real estate underneath home screen icons. Names longer than 12 characters are typically truncated with an ellipsis (e.g., 'My Great A...').
theme_color styles the browser address bar, mobile status bar, and task switcher window frame. background_color defines the canvas color painted before web stylesheets are loaded, preventing white flashes on splash screens.
No. All image resizing, canvas drawing, maskable padding, and ZIP compression occur 100% locally in your browser memory using HTML5 Canvas and JSZip. No image data is ever uploaded.
Open Chrome DevTools (F12), click the 'Application' tab in the top navigation bar, and select 'Manifest' in the left sidebar. This displays parsed manifest properties, icons, and any validation errors.
The manifest specification allows SVG icons with 'type: image/svg+xml'. However, many mobile operating systems and launcher docks require raster PNG arrays to render home screen icons reliably. Providing PNGs ensures universal compatibility.

Explore More App & Site Builders

Verify or wrap your site formats using our interactive code generators and visual setup assistants.