Manifest Generator

Free online Web App Manifest generator for Progressive Web Apps (PWA). Create manifest.json with app name, icons, theme colors, display modes, and more. Instant generation with customizable options for installable web applications.

Basic Information

App Name *

Full name of your application (required)

Short Name

Short name for home screen (max 12 characters)

Description

Describe your app's purpose and features

Start URL

URL that loads when app is launched

Scope

Navigation scope (URLs within this will use app mode)

Display Settings

Display Mode

How the app appears when launched

Orientation

Screen orientation preference

Language

Primary language (ISO 639-1 code)

Theme & Colors

Theme Color

Browser UI color (address bar, etc.)

Background Color

Splash screen background color

App Icons

Recommended sizes: 192x192, 512x512. PNG format preferred for compatibility.

Screenshots (Optional)

App screenshots for app stores and install prompts. Recommended: 1280x720 or 750x1334.

Categories & Rating

Web App Manifest Generator - Create PWA Manifest.json

A comprehensive tool for generating Web App Manifest files (manifest.json) for Progressive Web Apps (PWA). Configure app metadata, icons, colors, display modes, and more. Essential for making your web app installable on mobile devices and desktop.

What is a Web App Manifest?

A Web App Manifest is a JSON file that tells the browser about your Progressive Web App (PWA) and how it should behave when installed on a user's device.

**Key Components:**

**Basic Information:**
• name: Full app name (e.g., "My Awesome App")
• short_name: Short name for home screen (12 chars max)
• description: What your app does
• start_url: URL that loads when app launches
• scope: Navigation scope of the app

**Display Settings:**
• display: How app appears (standalone, fullscreen, etc.)
• orientation: Screen orientation preference
• lang: Primary language code

**Visual Identity:**
• theme_color: Browser UI color
• background_color: Splash screen background
• icons: App icons in various sizes
• screenshots: App preview images

**Example Manifest:**
```json
{
"name": "My Awesome App",
"short_name": "MyApp",
"description": "An amazing application",
"start_url": "/",
"display": "standalone",
"theme_color": "#2196F3",
"background_color": "#ffffff",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
```

**Why Use It:**
• Makes your web app installable
• Provides native app-like experience
• Controls splash screen appearance
• Defines app identity in OS
• Required for PWA functionality
• Improves user engagement

**Browser Support:**
• Chrome/Edge: Full support
• Safari: Partial support (iOS 11.3+)
• Firefox: Good support
• Samsung Internet: Full support

**Location:**
Place manifest.json in your web root and link it in HTML:
```html
<link rel="manifest" href="/manifest.json">
```

How to use the Manifest Generator?

**Step 1: Basic Information**

1. **App Name (Required):**
• Enter full application name
• This appears in install prompts and app lists
• Example: "Task Manager Pro"

2. **Short Name:**
• Abbreviated name for home screen
• Maximum 12 characters
• Example: "TaskMgr"
• Falls back to app name if not provided

3. **Description:**
• Brief explanation of your app
• Appears in app stores and install prompts
• Example: "Manage your tasks efficiently"

4. **Start URL:**
• URL that loads when app launches
• Usually "/" for root
• Can be specific page: "/dashboard"

5. **Scope:**
• Defines navigation boundaries
• URLs within scope use app mode
• Outside scope opens in browser
• Usually "/" to include entire site

**Step 2: Display Settings**

1. **Display Mode:**
• **Standalone** (recommended): Looks like native app, no browser UI
• **Fullscreen**: Full screen, no status bar
• **Minimal UI**: Minimal browser controls
• **Browser**: Regular browser tab

2. **Orientation:**
• **Any**: Allow rotation (default)
• **Portrait**: Lock to portrait
• **Landscape**: Lock to landscape
• **Portrait/Landscape Primary**: Specific orientation

3. **Language:**
• ISO 639-1 code (en, es, fr, etc.)
• Default: en

**Step 3: Theme & Colors**

1. **Theme Color:**
• Browser UI color (address bar, task switcher)
• Use color picker or enter hex code
• Example: #2196F3 (blue)
• Visible in Android status bar

2. **Background Color:**
• Splash screen background
• Should match app's primary background
• Example: #ffffff (white)
• Shows while app loads

**Step 4: Icons**

1. Click "Add Icon" button
2. For each icon:
• **Image URL**: Path to icon file
• **Sizes**: Dimensions (192x192, 512x512)
• **Type**: Image format (PNG, JPEG, SVG)
• **Purpose**: Any, Maskable, Monochrome

**Recommended Icons:**
• 192x192: Minimum for install prompt
• 512x512: High-res for splash screen
• Maskable: Adaptive icons (safe zone design)

**Step 5: Screenshots (Optional)**

1. Click "Add Screenshot"
2. For each screenshot:
• **Image URL**: Path to screenshot
• **Sizes**: Resolution (1280x720, 750x1334)
• **Platform**: Wide (desktop) or Narrow (mobile)
• **Label**: Description of screen

**Used for:**
• Install prompts
• App stores
• Share sheets

**Step 6: Additional Info**

1. **Categories:**
• Comma-separated list
• Available: business, education, entertainment, finance, fitness, food, games, government, health, kids, lifestyle, magazines, medical, music, navigation, news, personalization, photo, politics, productivity, security, shopping, social, sports, travel, utilities, weather

2. **IARC Rating:**
• Content rating ID
• Optional, for app stores

**Step 7: Generate**

1. Click "Generate Manifest"
2. Review generated JSON
3. Copy or download as manifest.json
4. Upload to your web server root
5. Link in HTML: `<link rel="manifest" href="/manifest.json">`

**Tips:**
• Use PNG format for icons (best compatibility)
• Provide multiple icon sizes
• Choose theme color that matches brand
• Test manifest with Lighthouse audit
• Validate with PWA Manifest Validator

Display modes explained

**Display Modes:**

The display mode controls how your PWA appears when launched from the home screen.

**1. Standalone (Recommended)**

**Appearance:**
• Looks like a native app
• No browser address bar
• No browser navigation buttons
• Has status bar (time, battery, etc.)
• Own window in task switcher

**Best For:**
• Most PWAs
• Apps that don't need browser features
• Native-like experience

**Example:**
Twitter, Instagram, Spotify web apps

**User Experience:**
```
┌─────────────────────┐
│ Status Bar │ ← Phone status
├─────────────────────┤
│ │
│ Your App Content │
│ │
│ │
└─────────────────────┘
```

**2. Fullscreen**

**Appearance:**
• Takes entire screen
• No status bar
• No browser UI
• Maximum screen real estate

**Best For:**
• Games
• Media players
• Immersive experiences
• Presentations

**Example:**
Mobile games, video players

**User Experience:**
```
┌─────────────────────┐
│ │
│ │
│ Your App Content │ ← Full screen
│ │
│ │
└─────────────────────┘
```

**Caution:**
• User can't see battery/time
• Provide way to exit fullscreen
• May feel too aggressive

**3. Minimal UI**

**Appearance:**
• Minimal browser controls
• Back/forward/reload buttons
• No address bar for editing
• Refresh button visible

**Best For:**
• Apps needing navigation controls
• Content-heavy apps
• Reading apps

**User Experience:**
```
┌─────────────────────┐
│ Status Bar │
│ [<] [>] [↻] │ ← Minimal controls
├─────────────────────┤
│ │
│ Your App Content │
│ │
└─────────────────────┘
```

**4. Browser**

**Appearance:**
• Normal browser tab
• Full browser UI
• Address bar
• All browser features

**Best For:**
• Websites
• Apps requiring URL visibility
• Content sites

**User Experience:**
```
┌─────────────────────┐
│ [<][>] example.com │ ← Full browser UI
├─────────────────────┤
│ │
│ Your App Content │
│ │
└─────────────────────┘
```

**Fallback Chain:**

If browser doesn't support chosen mode, it falls back:

fullscreen → standalone → minimal-ui → browser

**Choosing Display Mode:**

**Use Standalone if:**
✓ Building app-like experience
✓ Don't need URL bar
✓ Want native feel
✓ Most common choice

**Use Fullscreen if:**
✓ Building game
✓ Media consumption app
✓ Need maximum space
✓ Immersive experience

**Use Minimal UI if:**
✓ Need navigation controls
✓ Users expect browser features
✓ Transitioning from website

**Use Browser if:**
✓ Regular website
✓ URL visibility important
✓ Not a true "app"

**Testing:**

Test on actual device:
1. Install PWA from browser
2. Launch from home screen
3. Verify display mode
4. Check user experience

**CSS Media Query:**

Detect display mode in CSS:
```css
@media (display-mode: standalone) {
/* Styles for standalone mode */
}

@media (display-mode: fullscreen) {
/* Styles for fullscreen mode */
}
```

**JavaScript Detection:**
```javascript
if (window.matchMedia('(display-mode: standalone)').matches) {
console.log('Running in standalone mode');
}
```

Icon requirements and best practices

**Icon Requirements:**

**Minimum Requirements:**

**Size Requirements:**
• **192x192px**: Minimum for install prompt
• **512x512px**: Recommended for splash screen
• PNG format (best compatibility)
• Square aspect ratio (1:1)

**Basic Manifest Entry:**
```json
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
```

**Comprehensive Icon Set:**

**Recommended Sizes:**
• 72x72: iOS small
• 96x96: Android small
• 128x128: Chrome Web Store
• 144x144: Windows small
• 152x152: iOS large
• 192x192: Android standard
• 384x384: High-res Android
• 512x512: Splash screen

**Icon Purposes:**

**1. Any (default)**
```json
{
"src": "/icons/icon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
}
```
• Standard icon
• No special treatment
• Used everywhere

**2. Maskable**
```json
{
"src": "/icons/icon-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
```
• Adaptive icon for Android
• Content in safe zone (80% of image)
• Edges may be cropped to various shapes
• Design with center focus

**Maskable Icon Guidelines:**
```
┌─────────────────────┐
│ Padding (10%) │
│ ┌───────────────┐ │
│ │ │ │
│ │ Safe Zone │ │ ← 80% of size
│ │ (80%) │ │
│ │ │ │
│ └───────────────┘ │
│ Padding (10%) │
└─────────────────────┘
```

Tool: https://maskable.app/

**3. Monochrome**
```json
{
"src": "/icons/icon-mono.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "monochrome"
}
```
• Single color icon
• Used in shortcuts menu
• Quick actions
• Usually white on transparent

**4. Multiple Purposes**
```json
{
"src": "/icons/icon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
```
• Icon serves multiple purposes
• Must meet all requirements

**File Formats:**

**PNG (Recommended)**
• Best compatibility
• Supports transparency
• Lossless compression
• Works on all platforms

**SVG**
• Scalable
• Small file size
• Limited support
• Use PNG fallback

**WebP**
• Modern format
• Better compression
• Not universally supported
• Use PNG fallback

**Design Guidelines:**

**General:**
• Simple, recognizable design
• High contrast
• Avoid text (looks bad small)
• Test at small sizes
• Square, not rectangular
• Transparent or solid background

**Color:**
• Use brand colors
• Ensure contrast
• Test on light and dark backgrounds
• Avoid gradients (can look bad scaled)

**Testing:**
• Test on actual devices
• View in app drawer
• Check on different Android shapes
• Verify splash screen appearance

**Tools:**
• Maskable.app - Test maskable icons
• PWA Asset Generator - Auto-generate all sizes
• RealFaviconGenerator - Generate complete icon set
• Squoosh - Optimize images

**Common Mistakes:**

❌ Too much detail (unreadable at small size)
❌ Text in icon (illegible)
❌ Not testing maskable safe zone
❌ Wrong aspect ratio
❌ Low resolution source
❌ Only one icon size
❌ Forgetting transparency
❌ Using JPEG (no transparency)

✓ Simple, bold design
✓ High contrast
✓ Test at multiple sizes
✓ Provide multiple resolutions
✓ Use PNG with transparency
✓ Test maskable safe zone
✓ Optimize file size

Key Features

Generate complete Web App Manifest
Support all manifest properties
Visual theme color picker
Multiple icon entries
Screenshot configuration
Display mode selection
Orientation preferences
Category selection
IARC rating support
Maskable icon support
JSON syntax validation
Pretty-printed output
Copy manifest to clipboard
Download as manifest.json
PWA best practices
100% client-side processing
No data sent to server
Mobile-friendly interface
Dark mode support
Free and unlimited use