PWA maskable icon generator

Upload your logo, pick a background, and generate a maskable icon that follows the Progressive Web App standard: your logo stays clearly visible even when the system crops the icon into a circle, a rounded square, or any other shape.

Drag and drop your logo here, or click to browse (ideally transparent, 15 MB max).

How it works

A maskable icon has to fill the entire square, edges included (unlike a regular icon with transparent margins), because the operating system then applies its own crop shape (circle, rounded square, teardrop...) on top. The dotted circle shown in the preview marks the standard safe zone (about 80% of the diameter): any logo placed inside it stays visible whatever crop shape the user's device applies.

Do I also need to provide a regular (non-maskable) icon?

Yes, it's recommended to declare both types of icons in your PWA's manifest file (one entry with "purpose": "any" and one with "purpose": "maskable"), because some systems don't apply any crop and display the "any" icon as is.

Why generate both 192x192 and 512x512?

The 192x192 size is the minimum recommended for the home screen icon on most Android devices, while 512x512 is used for the splash screen and in contexts that need higher resolution, such as app stores.

100% local processing: the icon is composed entirely in your browser, and your logo is never sent to a server.