Free PWA Icon Generator
The Complete PWA Asset Toolkit
Icons · Favicons · iOS Splash · Manifest — generated in your browser. Nothing is ever uploaded.
Drop your logo here
PNG · SVG · WEBP · JPG · Recommended ≥ 512×512
Why use this PWA icon generator
Everything a modern PWA needs — in one privacy-preserving, entirely browser-based tool.
Privacy by Design
0 uploads. Your logo is processed entirely in your browser using Canvas — nothing ever leaves your device.
Every Apple Device
30+ iOS splash screens auto-generated, covering iPhone SE through iPhone 17 Pro Max and all iPad models.
6 Maskable Shapes
Live preview across Pixel, Samsung, Xiaomi, OPPO, Vivo, Huawei, OnePlus, Nothing — global launcher coverage.
Dark Mode Aware
Auto-generate dark mode splash and icon variants with proper media-query annotations in manifest.
Copy-Paste HTML
All HTML head meta tags, manifest links, and splash screen markup ready to paste into your project.
Manifest Complete
id, scope, screenshots, shortcuts, categories — built to pass Chrome installability and trigger rich install dialog.
This generator vs. upload-based PWA icon tools
Most generators make you upload your logo and only cover part of the stack. Here is how this one compares.
| Capability | This tool | Upload-based favicon tools | PWA platform tools |
|---|---|---|---|
| 100% in-browser (zero upload) | |||
| iOS splash screens (30+ devices) | |||
| Maskable live preview (6 shapes) | |||
| Dark mode splash + icons | |||
| Favicon suite (.ico / .svg / Safari) | |||
| Rich manifest (id, screenshots, shortcuts) | |||
| Copy-paste HTML snippet | |||
| Full Chinese + English UI | |||
| Free, no signup |
✓ Supported · ~ Partial / paid · ✗ Not available
Competitor capabilities are grouped by type and reflect typical offerings; individual products vary and change over time.
New to PWA icons? Read the full guide: PWA icon requirements & safe areas
How to generate your PWA icons in 4 steps
From a single logo to a complete, install-ready asset set in under a minute.
1. Upload your logo
Drag in a square PNG, SVG or WebP — 512×512 or larger gives the sharpest results. SVG stays vector-sharp at every size, and nothing is ever uploaded to a server.
2. Set name, colors & platforms
Edit your app name, short name, theme and background colors, then toggle Android maskable icons, Apple touch icons, iOS splash screens and the favicon suite on or off.
3. Preview shapes & devices
Check your maskable icon against six real Android launcher shapes and see every iOS splash screen rendered per device before you commit.
4. Download the bundle
Grab one ZIP with every icon size, the favicon set, iOS splash images, a validator-clean manifest.json, a service worker and a copy-paste HTML snippet.
PWA icon sizes & formats explained
Which icon sizes a Progressive Web App actually needs, and what each one is for.
A modern PWA targets three platforms at once — Android, iOS and the desktop browser — and each expects icons in different sizes and formats. The table below covers every asset this generator produces and where the browser uses it.
| Asset | Size | Purpose |
|---|---|---|
| PWA icon (any) | 72–512 px (8 sizes) | Home-screen and app-list icons declared in manifest.json. 192×192 and 512×512 are required for installability. |
| Maskable icon | 192 & 512 px | Android adaptive icons. Important content stays inside the 80% safe zone so launchers can mask it to any shape without clipping. |
| Apple touch icon | 180×180 px | The home-screen icon iOS uses when a user adds your web app to their Home Screen. |
| Favicon | 16 / 32 / 48 px .ico + SVG | The icon shown in browser tabs, bookmarks and history. SVG scales crisply; .ico covers legacy browsers. |
| iOS splash screen | 30+ device resolutions | apple-touch-startup-image launch screens that prevent the blank white flash while an installed iOS web app boots. |
What’s inside your PWA icon download
One ZIP, every file your PWA needs — ready to drop into your project root.
icons/
Eight PNG icon sizes plus 192 & 512 maskable variants, each compressed with upng-js to stay under 100 KB.
favicon/
favicon.ico (multi-resolution), favicon.svg, 16/32/48 PNGs and a 180×180 apple-touch-icon.
splash/
30+ apple-touch-startup-image PNGs for every iPhone and iPad, plus an HTML file with the matching <link> media-query tags.
manifest.json
A complete, validator-clean web app manifest with id, scope, display mode, screenshots, shortcuts and categories.
service-worker.js
A production-ready service worker template — network-first for HTML, cache-first for assets, with versioned cache cleanup.
install-snippet.html
Every <head> tag you need — manifest link, theme-color, favicons, Apple meta and splash links — ready to copy and paste.
PWA icon generator — frequently asked questions
PWA icons, favicons, iOS splash screens and manifests — answered.
What sizes are needed for PWA icons?
PWAs require 192×192 for the home screen and 512×512 for splash screens. Additional sizes such as 144×144 and 256×256 improve the experience across devices. This tool generates all eight common sizes plus maskable variants.
What are maskable icons?
Maskable icons are PWA icons designed to work with Android adaptive icon shapes. They keep important content inside a safe zone so the icon still looks correct when a launcher masks it to a circle, squircle, rounded square or other shape.
Do I need a web manifest file?
Yes. A PWA needs a manifest.json that declares your app name, icons, theme colors, start URL and display mode so browsers can offer installation. This tool generates a complete, validator-clean manifest for you.
Why is my iOS PWA showing a white screen on launch?
iOS shows a blank white screen while a web app boots unless you provide apple-touch-startup-image splash screens that match each device resolution and orientation. This tool generates 30+ splash images and the matching <link> media-query tags so the launch screen is filled.
What is the manifest id and why should I add it?
The manifest id is a stable identifier for your PWA. Browsers use it to recognize the same app even if start_url or scope change, which keeps a single install rather than creating duplicates. This tool sets a unique id automatically and lets you edit it.
Can I use an SVG favicon?
Yes. Modern browsers support SVG favicons via <link rel="icon" type="image/svg+xml">. When you upload an SVG, this tool keeps the original vector as favicon.svg and still generates .ico and PNG fallbacks for older browsers.
How many iOS splash screens do I really need?
To cover current iPhone and iPad models in both portrait and landscape you need roughly 30 to 60 images, each matched with a precise media query. This tool generates the full set automatically so you do not have to maintain the device matrix by hand.
Does this tool upload my logo anywhere?
No. Every icon, favicon and splash screen is rendered locally in your browser with Canvas. Your logo never leaves your device and no image is sent to any server — you can verify this in your browser's Network panel.
What’s the difference between PWA icons and native app icons?
PWA icons live in your web app manifest and are rendered by the browser and launcher, so they must cover web formats like maskable PNGs and favicons. Native app icons are compiled into a platform package (.ipa / .apk) and follow each store’s strict asset catalog. This tool produces the web-side set a PWA needs — no app store account required.
What size should a favicon be?
Ship a 32×32 and 16×16 PNG for tabs, a multi-resolution favicon.ico (16/32/48) for legacy browsers, and ideally an SVG favicon that scales to any density. A 180×180 apple-touch-icon covers iOS bookmarks. This generator outputs all of them from one upload.
Can I generate PWA icons without uploading my logo?
Yes — that is the core of this tool. Every icon, favicon and splash screen is rendered locally with the Canvas API, so your logo never leaves your browser. There is no server round-trip, no account and no watermark, which makes it safe for confidential or unreleased branding.
Do I need a service worker for my PWA to be installable?
For the menu “Install app” option, modern Chrome no longer requires a service worker — a valid manifest with the right icons is enough. A service worker with a fetch handler is still needed for offline support and for the browser to actively prompt installation. This tool ships a ready-to-use service worker template either way.
Want to go deeper?
PWA Icon Requirements & Safe Areas: The Complete Guide