Back to blog
App Icon Design

Manifest Icon Generator: PWA Maskable & Adaptive Icons in 2026

AI manifest icon generator: prompt → standard 192/512 + maskable 192/512 + manifest.json snippet in 60 seconds. Maskable safe zone, Lighthouse PWA scoring, 6-tool comparison.

IconikAI TeamMay 8, 2026
Manifest Icon Generator: PWA Maskable & Adaptive Icons in 2026

Manifest Icon Generator: PWA Maskable & Adaptive Icons in 2026

A manifest icon generator produces the full set of PNG icons your manifest.json references for a Progressive Web App — the standard 192×192 and 512×512 sizes, plus a maskable variant with the safe-zone padding Android needs to clip your icon into adaptive shapes. A good generator outputs the icons, the JSON snippet you paste into manifest.json, and the favicon and Apple touch icon variants for full cross-platform coverage in one pass.

If you are shipping a PWA in 2026, your manifest.json needs at least four icon files: a 192×192 standard, a 512×512 standard, a 192×192 maskable, and a 512×512 maskable. Most teams also include a 512×512 monochrome icon for Android badging. This pillar walks through the exact JSON structure, the safe-zone math behind maskable icons, the difference between purpose: "any" and purpose: "maskable", and the 60-second AI workflow that ships every required PWA icon from a single text prompt.

What is a manifest icon generator?

A manifest icon generator is a tool that produces every PNG asset referenced in a PWA's manifest.json — typically 192×192, 512×512, and matching maskable variants — plus the JSON snippet you copy into the manifest's icons array. Some generators also output Apple touch icons (180×180), favicons (16, 32, 48), and Android monochrome icons used for themed-icon notifications.

PWA icons differ from native iOS or Android app icons in two ways. First, they live as PNG files at fixed URLs your manifest references, not as bundled assets compiled into a binary. Second, the maskable variant has to include 10 percent safe-zone padding on each side because Android can clip the icon into circles, squircles, or teardrop shapes depending on the launcher. Get the padding wrong and your logo gets chopped off in the user's app drawer.

In 2026, Chrome 132 and Edge 130 added stricter validation: a PWA icon without a maskable variant now triggers a Lighthouse warning and may be rejected from the Microsoft Store and Google Play (when packaged as a Trusted Web Activity). A real manifest icon generator handles maskable safe zones automatically, which is why most teams have moved past one-off resizers like RealFaviconGenerator for new PWAs.

The icons generators differ on whether they create the source artwork or just resize an upload. AI generators like IconikAI's App Icon Generator generate the source design from a text prompt and produce the full PWA icon set; resizers like Maskable.app take a 1024 PNG you already have and pad/crop it for the manifest. Both have a place — pick AI when you don't have a design, pick a resizer when you do.

For the broader PWA icon picture, see our PWA Icon Generator: AI Tool for 2026 pillar.

Required PWA manifest icons in 2026

A PWA manifest needs four icons minimum in 2026: a 192×192 standard, a 512×512 standard, a 192×192 maskable, and a 512×512 maskable. Chrome installability requires at least one 192 and one 512 in the icons array; the maskable variants are required for clean Android home-screen rendering. Many teams also add a 192×192 monochrome icon for themed-icon support and a 1024×1024 marketing icon for app-store packaging.

The 192×192 size is the historical Android home-screen size. The 512×512 size is what Chrome uses for the splash screen and what Android uses on high-DPI launchers. Skipping 512 means your splash screen falls back to the 192 upscaled, which looks soft. Skipping 192 means Chrome refuses to mark the PWA as installable.

Icon slotSizePurposeRequired?
Standard 192192×192Home screen, browser fallbackYes
Standard 512512×512Splash screen, app drawerYes
Maskable 192192×192Android adaptive home-screen iconYes (2026)
Maskable 512512×512Android splash/app drawer adaptiveYes (2026)
Monochrome 192192×192Android themed iconsRecommended
Apple touch180×180iOS home screenRecommended
Favicon16/32/48Browser tabRecommended

The maskable safe zone is the most-missed detail. Android can crop the icon into a circle, squircle, rounded square, or teardrop — depending on the launcher and the OEM. The 80 percent center circle is the only area guaranteed to display on every device. So a maskable 192 icon must keep all critical artwork inside a centered 154×154 circle, with the outer 19 pixels treated as safe-to-clip padding.

The most common mistake: re-using the standard icon as the maskable icon by changing only the purpose field in JSON. The icon then either gets cropped (if it has logo-edge details) or shows visible padding around the design (if it does not). The fix is to generate a separate maskable variant with explicit safe-zone padding, which is exactly what AI generators including IconikAI do automatically.

How to write the manifest.json icons array

The icons array in manifest.json lists every PNG with three fields: src (path), sizes (WxH), and purpose. A 2026-compliant minimal manifest has four entries — two standard and two maskable. A complete one adds monochrome plus Apple touch references via the HTML <link> tag (Apple icons are not in the manifest).

Here is the minimum viable 2026 manifest icons block:

{
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-192-maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

A few common mistakes to avoid. Do not combine purposes by writing "purpose": "any maskable" — Chrome treats this as one icon for both, and your standard icon will get cropped. Use separate entries with separate files. Do not omit type — Chrome 132 logs a warning. Do not point src at a route that requires authentication; PWA install hooks fetch icons anonymously and will silently fail if the URL returns 401.

A manifest icon generator like IconikAI outputs the JSON snippet alongside the PNGs so you copy-paste it directly into your existing manifest. The path is relative to the manifest's URL — if manifest.json is at /manifest.json, then /icons/icon-192.png resolves to https://yourdomain.com/icons/icon-192.png.

Maskable safe-zone math (and why it matters)

A maskable icon's "safe zone" is the 80 percent diameter circle in the center of the canvas where critical artwork must live; the outer 20 percent is padding the OS may clip into circles, squircles, or teardrops. For a 192×192 icon that means a 154×154 safe zone (19 pixels of padding on each side). For a 512×512 icon it is a 410×410 safe zone (51 pixels of padding).

The math comes from the W3C maskable icons spec, which Android adopted in 2019 and Chrome enforced via Lighthouse warnings in 2021. The "80 percent rule" is a conservative bound — most launchers actually clip closer to 90 percent, but the 80 percent zone is the only universally safe area. Designing to 80 percent guarantees your icon renders correctly on Pixel, Samsung One UI, OPPO ColorOS, and every other Android skin.

When you upload an existing icon to a maskable converter, the tool either pads the canvas (adding transparent or solid-color border) or scales the icon down to fit the safe zone. Padding works when your icon already has flat margin built in; scaling works when it does not. AI generators like IconikAI render the maskable variant directly with the safe zone built in, which produces a sharper result than padding a smaller-source icon.

For the cross-platform context, see our Android App Icon Sizes 2026 guide, which covers how Android handles adaptive icons natively in addition to the PWA maskable equivalent.

Manifest icon generator comparison — 6 options

ToolAI generation?Maskable safe zone?Outputs JSON?Free tier
IconikAI App Icon GeneratorYesYes (auto)YesYes (2 credits/gen)
Maskable.appNo (resizer)Yes (preview tool)PartialYes
RealFaviconGeneratorNo (resizer)YesYesYes
PWA Builder Icon GeneratorNo (resizer)YesYesYes
Favicon.ioNo (resizer)NoLimitedYes
MidjourneyYes (general)NoNoPaid only

The honest read: IconikAI is the right answer if you do NOT have a finished design — generation, refinement, and full PWA icon set in one pass. RealFaviconGenerator and PWA Builder are the right answer if you already have a 1024 PNG and want a finished manifest snippet for free. Maskable.app is the best place to preview how a maskable icon will look across Android launchers before shipping.

If you already have a Figma design and just need maskable padding plus the manifest snippet, the resizers are faster. If you are starting from scratch, an AI generator saves 10–20 minutes per iteration vs Figma + Maskable.app.

For more on AI vs traditional resizers, see our Free AI Icon Generator: 2026 Comparison pillar.

60-second PWA icon workflow with IconikAI

The fastest path from blank screen to a fully-installable PWA icon set is: open the App Icon Generator, paste a one-sentence description of your PWA, pick a style, generate, then export the PWA preset. The total time is 60 seconds for a single iteration. Each generation costs 2 credits and produces 2 variants you can pick from.

Step 1 — Prompt: write one sentence with the app's purpose, a color cue, and a style word. "Habit tracker PWA icon, calm green gradient, leaf silhouette, minimal." The AI does better with one concrete sentence than a paragraph of detail.

Step 2 — Pick a style: IconikAI exposes 15+ curated styles. For PWAs, minimal and glassmorphism tend to render best at the small (192) size and survive maskable cropping cleanly.

Step 3 — Generate: 2 credits → 2 variants in under 10 seconds. Brand Kit memory keeps your color palette consistent across generations, which matters when the maskable and standard variants need to feel like one icon.

Step 4 — Chat-to-Edit (optional): say "make the leaf rounder so it survives circular masks" and the AI re-renders with the safe-zone-aware change. This is the single biggest workflow advantage over Midjourney for maskable design.

Step 5 — Export: one click ships the 192, 512, maskable 192, maskable 512, monochrome 192, Apple touch 180, plus the manifest.json snippet. Drop the PNGs in your /icons/ folder, paste the snippet into your manifest.json, ship.

How does Lighthouse score PWA icons?

Lighthouse's PWA audit checks four things on icons: the manifest references at least one 192×192 icon, the manifest references at least one 512×512 icon, at least one icon has purpose containing maskable, and every icon URL returns a 200 status with a valid PNG. Missing any of these drops the PWA score below 90.

In 2026, Lighthouse added a new soft check: "Provide a separate maskable icon" — flagged as a warning if you use the "any maskable" combined-purpose pattern. The fix is two separate entries (one "any", one "maskable") with two different PNG files, which any AI generator including IconikAI outputs by default.

The fastest way to debug a failed PWA icon audit is to open Chrome DevTools → Application → Manifest. The icon list shows exactly what Chrome read from your manifest, what URLs failed, and a preview of how the maskable icon renders inside a circle, squircle, and rounded square. If the preview shows clipped artwork, your safe zone is too tight.

Pricing — what does AI PWA icon generation cost?

IconikAI uses credit-based, pay-as-you-go pricing with no subscription. PWA icon generation costs 2 credits per call (2 variants), and the entry tier is $5 for 200 + 100 bonus credits — enough for ~150 PWA icon generations. There is no monthly fee, no contract, and the same credits work across the App Icon Generator, Screenshot Generator, and Store Description Generator.

PlanPriceCreditsBonusApprox. PWA icon generations
Starter$5200+100~150
Popular$10500+200~350
Pro$251,500+350~925
Power$504,000+500~2,250

For an indie PWA, the Starter tier covers ~150 icon iterations — enough for a launch and a year of refreshes. For agencies shipping multiple PWAs, Pro covers a year of icon work for a single team.

If you also need PWA screenshots, the App Screenshot Generator uses the same credit pool. For full ASO when you package the PWA as a TWA on Google Play, the ASO Growth Agent is $50/app/month with a 30-day money-back guarantee.

Common manifest icon mistakes to avoid

Five mistakes that ship most often in 2026: (1) using "purpose": "any maskable" on a single file, (2) skipping the safe zone on maskable variants, (3) referencing icons via src paths that require auth, (4) omitting the type field (Chrome 132 logs a warning), and (5) pointing the manifest at a 1024 source as the only icon (Chrome wants explicit 192 and 512).

The first mistake — combined-purpose — is the single biggest cause of PWA icons looking "wrong" on Android. A flat icon designed for "any" will get cropped when Android applies the maskable mask. Always ship two separate files with two separate purposes.

The auth-protected src mistake is sneaky. PWA install hooks fetch icon URLs anonymously even if the rest of your app requires login. Put PWA icons under a public path (e.g., /icons/) that bypasses auth middleware.

For more on how PWA icons differ from native app icons, see our PWA Icon Generator pillar, the iOS App Icon Sizes guide, and the Android App Icon Sizes guide.

Post-generation checklist (30 seconds)

After your manifest icon generator outputs the PNGs and JSON snippet, run this 30-second checklist before you ship: open Chrome DevTools → Application → Manifest and verify all icons load (status 200, no 404 or 401); preview the maskable variants against the circle, squircle, and rounded-square masks (no critical artwork clipped); confirm the manifest references at least one 192 AND one 512; verify type: "image/png" is set on every entry; and run Lighthouse's PWA audit and check the icon checks pass.

The Lighthouse audit catches more PWA icon problems than manual review. If it passes the four icon checks, your PWA is installable on Chrome, Edge, Brave, Samsung Internet, and any other Chromium browser.

Beyond the icon — full PWA launch readiness

A great icon is one of three assets that affect PWA installability and engagement. The other two are screenshots (for the install prompt and Microsoft Store) and the description metadata. The App Screenshot Generator creates the screenshot images you reference in your manifest's screenshots array, with AI-generated headlines and device mockups. The Store Description Generator (in the IconikAI dashboard at /tools/store-description) writes ASO-optimized listings if you package the PWA as a Trusted Web Activity for Google Play.

If you want a managed solution, the ASO Growth Agent handles keyword research, metadata optimization, screenshot experiments, and weekly progress reports for $50/app/month. The 30-day money-back guarantee covers the case where rankings do not move.

For teams who want the whole launch handled, MVP App Development builds a Flutter MVP for $1,000 in 1 week — the same Flutter codebase ships as a PWA, an Android APK, and an iOS app. iOS App Publishing at $30 and Android App Publishing at $50 handle the actual store submission.

FAQ

Q: What is the best manifest icon generator in 2026? A: For AI generation plus full PWA icon export, IconikAI's App Icon Generator is the most efficient — it produces a 1024 source, the standard 192/512, the maskable 192/512, monochrome, Apple touch, and the manifest.json snippet in one pass for 2 credits ($0.05 on the Starter plan). For pure resizing of an existing design, RealFaviconGenerator and PWA Builder both produce manifest snippets for free. For previewing how a maskable icon will look across Android launchers, Maskable.app is the best dedicated tool.

Q: Are manifest icon generators free? A: Many have a free tier. IconikAI gives you 100 free credits to start (~50 generations); Maskable.app, RealFaviconGenerator, and PWA Builder are free for resizing existing designs. Truly unlimited free AI generation is rare — most AI tools require credits past the trial. See our Free AI Icon Generator 2026 comparison for a tool-by-tool breakdown.

Q: What is a maskable icon and why do I need one? A: A maskable icon is a PNG with 10 percent safe-zone padding on each side that lets Android clip it into different shapes (circles, squircles, teardrops) without cutting off your logo. You need at least one maskable variant in your manifest's icons array — without it, Lighthouse logs a warning and Android home-screen icons may look badly cropped. Both 192×192 and 512×512 maskable variants are recommended for 2026.

Q: Can I use one icon for both purpose: "any" and purpose: "maskable"? A: No, not cleanly. The combined-purpose pattern ("purpose": "any maskable") is allowed in the spec but Chrome 132 logs a warning, and the result is usually one of two failures: a flat icon designed for "any" gets cropped on Android, or a padded icon designed for "maskable" shows visible whitespace on browsers that render it as "any". The fix is two separate files with two separate manifest entries.

Q: How big does my source design need to be for a PWA icon? A: 1024×1024 pixels in a square aspect ratio is the recommended source. The 1024 source covers the largest manifest icon (512×512) at 2x density and gives the maskable converter enough resolution to crop without softening. Any AI generator including IconikAI starts at 1024 native, but if you are bringing your own design, 1024 is the minimum.

Q: Does my PWA need a 1024×1024 icon if Chrome only requires 512? A: Not in the manifest itself, but yes if you plan to package the PWA for app stores. Microsoft Store requires a 1024 marketing icon for PWA submissions; Google Play requires a 1024 marketing icon for Trusted Web Activity packaging. The same 1024 source you used to generate the manifest icons covers both store requirements.

Q: How long does it take to generate a PWA icon set with AI? A: Under 60 seconds end-to-end with IconikAI: ~10 seconds for the 1024 generation, ~5 seconds per Chat-to-Edit refinement, and ~3 seconds for the multi-size export. Compared to Figma + Maskable.app + manual JSON edits (~20 minutes for an experienced developer), the AI workflow is roughly 20× faster.

Q: Can I use IconikAI PWA icons commercially? A: Yes. Icons generated with IconikAI come with full commercial rights — you own the output and can ship it in PWAs, Trusted Web Activities, and packaged store apps. There is no royalty, no attribution requirement, and no per-install fee. This is the main reason developers pick IconikAI over Midjourney or DALL-E for app-icon work, both of which have ambiguous commercial-use terms for icon assets.

Final read

If you are shipping a PWA in 2026 and you don't already have a finished 1024 source design, an AI manifest icon generator like IconikAI is the fastest path to an installable, Lighthouse-clean PWA. You go from prompt to four manifest icons (standard 192, standard 512, maskable 192, maskable 512) plus the JSON snippet in 60 seconds, for 2 credits ($0.05 on the Starter plan). If you do already have a finished 1024 design, RealFaviconGenerator and PWA Builder produce the manifest snippet for free in under a minute. The right answer depends on whether you have a design — but for most indie devs and growth teams shipping PWAs in 2026, the AI route saves 20 minutes per icon iteration.

Get started: open the App Icon Generator, paste a one-sentence description of your PWA, and ship a fully-installable manifest icon set in 60 seconds.

pwamanifesticonsmaskableailighthouse