Maskable Icon Generator

Maskable icons allow web developers to specify an edge-to-edge icon that will be cropped by the user-agent to match other icons on the device. On Android, this lets developers get rid of the default white background around their icons and use the entire provided space by generating adaptive icons.

In earlier versions of Android, developers had the freedom to utilize app icons with transparent backgrounds. However, in recent Android updates, app icon shapes have been standardized. Now, across various Android versions, themes, and device manufacturers, app icons adhere to consistent sizes and shapes, which may include circular, square, or square icons with rounded corners.

To avoid the cumbersome task of uploading separate icons for each individual variation, browser vendors have introduced the concept of maskable icons. A maskable icon is an image file featuring a solid background and a designated safe area. This image is then automatically cropped to fit within the specific app icon box of each particular device, ensuring a uniform appearance across different Android platforms.

Maskable icons are used by iOS, Android 10 or later, macOS 14 Sonoma or later, and Chrome OS. The only major operating system that doesn't employ maskable icons as the default for PWAs is Windows. So you'll still have to provide a non-maskable icon in your manifest if you want your app icon to look good on Windows computers.

In practice, there are only three app icon masks you need to care about:

- iOS/macOS: rounded square icons (20% border radius)
- Android: circular icons (50% border radius)
- Samsung: squircle (40% border radius)

If your maskable app icons look okay on the first two, then you're good to go!

In your app manifest, you just need two icons: one maskable icon and one non-maskable icon, the latter serving to accommodate older platforms and Windows. You shouldn't have icons that are both maskable and non-maskable. Both icons should adhere to a square 1:1 aspect ratio. Provide icons at a size of 512x512 pixels for optimal compatibility.

Some platforms have their own preferred icon shape, but PWAs should work across multiple platforms. The "minimum safe area" (or "safe zone") is the part of the icon that is guaranteed to always be visible, regardless of user agent preferences.

As per W3C standards, critical elements of your icon should be positioned within the central circular region, having a radius equivalent to 40% of the icon size. That means that the outermost 10% of the icon may be cropped.

To assess which portions of your icons fall within the minimum safe area, open "Chrome DevTool" and proceed to the "Application" tab. Within the "Icons" section, you have a toggle that lets you see the minimum safe area for your maskable icons.