PWA Icon Generator
Generate all PWA icons, maskable icons, splash screens, and manifest files from a single image. Free, fast, and privacy-friendly.
What is a PWA icon?
A PWA icon is the image a phone or computer shows for your Progressive Web App once it is installed: on the home screen, in the app launcher, in the task switcher and on the splash screen. The browser reads the list of icons from your web app manifest and picks the size that fits each place.
There is no single PWA icon. Android, iOS, Windows and desktop browsers each ask for different sizes and shapes, which is why one logo has to be exported many times. This PWA image generator takes your logo once and produces every file, with the names already matched to the manifest.json it writes for you. As a PWA asset generator it also makes the favicon.ico, the Apple touch icon and the iOS splash screens, so nothing is left to export by hand.
PWA icon sizes and requirements
Chrome needs a 192x192 and a 512x512 PNG icon in the manifest before it offers to install a PWA. Everything else in the table makes the app look right on a specific platform.
| Icon | Size | Used for |
|---|---|---|
| Manifest icon | 192x192 | Android home screen and app launcher. Required for install. |
| Manifest icon | 512x512 | Install prompt and Android splash screen. Required for install. |
| Maskable icon | 192x192 and 512x512 | Android adaptive icons. The logo stays inside the central 80% safe zone. |
| Apple touch icon | 180x180 | iPhone and iPad home screen. Must have a solid background. |
| Favicon | 16x16, 32x32 and 48x48 (ICO) | Browser tabs, bookmarks and desktop shortcuts. |
| Splash screens | One per device | iOS launch screen, declared with apple-touch-startup-image. |
Already have icons on a live site? Run it through the PWA validator to see which of these are missing or broken.
How to add PWA icons to your site
List the icons in your manifest, then link the manifest and the browser icons from the head of every page. The ZIP from this generator contains the same manifest.json and tags, filled in with your app name and colors.
manifest.json
{
"name": "My PWA App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3b82f6",
"icons": [
{ "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/icons/icon-192x192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
{ "src": "/icons/icon-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}HTML head
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icons/icon-192x192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/icons/icon-180x180.png">
<meta name="theme-color" content="#3b82f6">No logo yet?
You do not need finished artwork to start. The built-in logo maker draws your initials or an emoji on a colored rounded square, circle or square, with an optional gradient, and the generator turns it into the same full set of icons.
Open the text and emoji icon generator to make one, or use the link under the upload box.
Everything You Need for PWA Assets
- All icon sizes from 16x16 to 512x512 pixels for every PWA requirement
- A live preview of every icon, each maskable shape and the splash screens before you download
- A real use preview of your icons in a browser tab, a search result and on Android and iPhone home and launch screens, also included in the ZIP
- A one-click demo with a sample logo, so you can try the generator before uploading anything
- Maskable icons for Android adaptive icons, with a proper safe zone
- iOS splash screens for popular iPhone and iPad devices in both orientations
- A ready-made manifest.json with all icon references included
- HTML meta tags for PWA icons and splash screen declarations
- A built-in logo maker for initials or an emoji, if you have no logo yet
- Images processed in your browser and never uploaded to a server
- One-click download of all assets as an organized ZIP file
How It Works
- Upload your logo as a PNG, JPG, SVG, or WEBP file, or make a simple one from initials or an emoji.
- Choose which assets to generate, adjust padding and background color, and check the live preview and the real use preview.
- Download a ZIP with icons, splash screens, manifest.json, and HTML meta tags.
Frequently Asked Questions
What size should a PWA icon be?
Provide at least a 192x192 and a 512x512 PNG in your web app manifest. Add 192x192 and 512x512 maskable icons for Android and a 180x180 Apple touch icon for iOS.
What is the difference between a PWA icon and a favicon?
A favicon is the small image in the browser tab and is linked from your HTML. PWA icons are listed in the web app manifest and are used after the app is installed, on the home screen and splash screen. A complete PWA ships both.
What image format should I use?
We recommend using PNG or SVG formats for the best quality. PNG works well for photos and complex images, while SVG is ideal for logos and icons as it scales perfectly. JPG and WEBP are also supported but may not preserve transparency.
What is the recommended image size?
For best results, use an image that is at least 512x512 pixels with a 1:1 aspect ratio (square). Larger images will be scaled down, and smaller images may appear blurry at larger icon sizes.
Can I preview the icons before downloading?
Yes. As soon as you add an image, the preview shows every icon size, the maskable icons cropped to a circle, a rounded square and a squircle, and the splash screens for each device. It updates as you change the padding and background color, so you only download once it looks right. The "See your icons in real use" button goes further and shows them in a browser tab, a search result, a desktop shortcut and on Android and iPhone home and launch screens. The ZIP includes that page as preview.html.
Can I use this tool without a logo?
Yes. Choose "No logo yet?" under the upload box, or open the text and emoji icon generator, to make a simple logo from your initials or an emoji on a colored square, rounded square or circle, with an optional gradient. It is drawn in your browser and then goes through the generator like any uploaded image. To just see how the tool works, choose "Try the demo" under the upload box: one click loads a sample logo with a name and colors and generates every asset, splash screens included.
What are maskable icons?
Maskable icons are a PWA feature that allows your icon to adapt to different shapes on Android devices. They include a safe zone so the icon looks good whether displayed in a circle (Pixel), rounded square (Samsung), or other shapes. This tool fills the background with your chosen colour and keeps your logo within the center 80% of the image.
Do I need splash screens?
Splash screens provide a native app-like experience on iOS devices. When a user adds your PWA to their home screen and opens it, the splash screen shows briefly while the app loads. They're optional but highly recommended for a polished experience.
How do I implement the generated assets?
Download the ZIP file and extract it. Copy the icons/ and splash/ folders to your project's public directory. Copy manifest.json and favicon.ico to your root/public folder. Then add the HTML code from meta-tags.html to your index.html <head> section.
Is this tool free to use?
Yes! This PWA Icon Generator is completely free. All processing happens in your browser - your images are never uploaded to any server. You can generate unlimited assets for personal or commercial projects.
Does this tool store my images?
No. All image processing happens locally in your browser using Canvas API. Your images never leave your device, ensuring complete privacy and security.