IcogenX

PWA Manifest Generator

Create a complete Progressive Web App manifest with optimized icons, theme colors, and all the configuration your PWA needs.

Auto Color Extraction

Automatically extract theme and background colors from your icon using advanced color analysis

All Icon Sizes

Generate all required PWA icon sizes (72px to 512px) including maskable variants

Complete Package

Download everything you need: icons, manifest.json, and ready-to-use HTML meta tags

PWA Compliant

Follows the latest Web App Manifest specification for maximum compatibility

Source Image
Upload your app icon to generate PWA-optimized versions
App Configuration
Generated Output
{
  "name": "My App",
  "short_name": "My App",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#3b82f6",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "lang": "en",
  "dir": "ltr"
}

What is a PWA Manifest?

A Progressive Web App (PWA) manifest is a JSON file that tells the browser about your web application and how it should behave when installed on the user's desktop or mobile device. It includes information about the app name, icons, theme colors, and display preferences.

Key Manifest Properties

📝
name

The full name of your application

📱
short_name

A shorter name for limited display areas (home screen)

🎨
icons

Array of icon objects with different sizes

🎨
theme_color

The color of the browser's address bar

🌈
background_color

The splash screen background color

📺
display

How the app should be displayed (standalone, fullscreen, etc.)

Maskable Icons

Maskable icons are designed to display correctly on Android devices that use different icon shapes. The "safe zone" (inner 80% of the icon) contains the important content, while the outer 10% on each side can be cropped to create circular, rounded square, or squircle shapes.

Icon Sizes Generated

📱
72×72, 96×96, 128×128
Legacy Android icons
💻
144×144, 152×152
iPad and older iOS devices
🏠
192×192
Primary Android home screen icon
✨
384×384
High-density displays
🚀
512×512
Splash screen and app stores
🎯
Maskable 192×192 & 512×512
With safe zone padding
PWA Manifest Generator | Create manifest.json for Progressive Web Apps