Maskable Icon Generator
Create Android adaptive (maskable) icons for your PWA with the correct safe zone and a solid background. Preview every mask shape before you download.
What is a maskable icon?
Android launchers crop app icons into different shapes: circles, rounded squares, squircles and more. A maskable icon is drawn edge to edge on a solid background so the launcher can crop it to any of those shapes without leaving gaps.
Without a maskable icon, Android shrinks your regular icon and places it inside a white circle, which makes a PWA look out of place next to native apps.
The safe zone
Anything outside the central 80% of a maskable icon may be cut off. This generator fills the whole canvas with your background color and always keeps your logo inside that safe zone, with at least 10% padding on every side. If your logo already has its own background, such as an app icon drawn as a rounded square, that background is continued to the edges instead.
Use the padding slider to shrink the logo further if its corners come close to the edge, and switch between the circle, rounded and squircle previews to check the result.
Good and bad maskable icons
A good maskable icon has an opaque background that reaches every edge, and a logo that sits comfortably inside the safe zone. It still reads clearly when cropped to a circle, the tightest of the common masks.
A bad one is usually a regular icon with the purpose changed. Transparent corners turn into empty space, a logo that touches the edge gets its sides cut off, and rounded corners baked into the image leave a visible outline inside the launcher shape.
Using maskable icons in your manifest
The download includes 192x192 and 512x512 maskable icons and a manifest.json that lists them with "purpose": "maskable", alongside regular icons with "purpose": "any". Keeping the two as separate files is the recommended setup, because a maskable icon used as a regular icon looks too small.
manifest.json
"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" }
]Test your maskable icon
In Chrome DevTools, open the Application panel, choose Manifest and tick the option that shows only the minimum safe area for maskable icons. Your logo should stay fully visible.
To check a site that is already live, the PWA validator reports whether the manifest declares a maskable icon and whether each icon file loads at the size it claims.
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 maskable icon be?
Provide at least 192x192 and 512x512 pixels. Both are generated here and referenced in the manifest.json for you.
How do I choose the background color of a maskable icon?
Use the Background Color option. Maskable icons must be opaque, so the whole canvas is filled with that color behind your logo.
Should I use "any maskable" as the icon purpose?
It is better to ship separate icons. A maskable icon has extra padding, so using the same file for both purposes makes your icon look small where no mask is applied.
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.