Maskable Icon Generator

What is a Maskable Icon?

Maskable icons are a newer icon format that give you more control and let your Progressive Web App use adaptive icons on Android. When you provide a maskable icon, it fills the entire shape that the device uses for app icons—whether that's a circle, a squircle, a teardrop, or a rounded square.

The "Safe Zone"

Because different devices will crop your icon differently, your core logo must fit inside a "safe zone." This zone is a circle right in the center of the image, with a radius of exactly 40% of the image size. Our tool visualizes this safe zone so you can adjust your padding appropriately.

How to use it

Upload your original logo, use the padding slider to shrink the logo into the safe zone, and choose a solid background color. Then download the resulting image. Finally, declare it in your manifest.json like this:

{
  "src": "path/to/maskable-icon.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}