Adaptive icon support in PWA with maskable icons

A new icon format for using responsive icons on support platforms.

Dec 19, 2019

What are maskable icons?

If you have installed a progressive web app on a recent Android phone, you may notice that the icon appears with a white background. Android Oreo introduced responsive icons, which display app icons in a variety of ways on different device models. Icons that do not follow this new format have a white background.

Maskable Icons are a new icon format that gives you more control and allows your progressive web application to use responsive icons. If you provide a maskable icon, your icon can fill the entire shape and look good on all Android devices. Firefox and Chrome have recently added support for this new format, and you can adopt it in your applications.

Are my current icons ready?

Since maskable icons must support a variety of shapes, provide an opaque image with some padding that the browser can later crop to the desired shape and size. It is best not to depend on any particular way, as it can vary by browser and platform.

Fortunately, there is a well-defined and standardized "Minimum safe area" respected by all platforms. Important parts of your icon, such as your logo, should be within a circular area in the center of the icon with a radius equal to 40% of the width of the icon. The outer edge of the 10% can be trimmed.

You can check which parts of your icons land within the safe zone with Chrome DevTools. With your progressive web application open, launch DevTools and navigate to the Request panel. At Icons section, you can choose Show only the minimum safe area for maskable icons. Your icons will be cropped so that only the safe area is visible. If your logo is visible within this secure area, you are good to go.

If you want to preview your maskable icon in other ways it may appear on Android, I have created a tool called Maskable.app. Open an icon, then Maskable.app will let you try various shapes and sizes, and you can share the preview with other members of your team.

How do I adopt maskable icons?

If you want to create a maskable icon based on your existing icon, you can use the Maskable.app editor. Upload your icon, adjust the color and size, then export the image.

Once you've created a maskable icon image and tested it in DevTools, you'll need to update your Web application manifest to flag new assets. The web application manifest provides information about your web application in a JSON file and includes a icons training.

With the inclusion of maskable icons, a new property value has been added for image resources listed in a web application manifest. the purpose The field tells the browser how its icon should be used. By default, the icons will have the purpose of "any". These icons will resize on a white background on Android.

The maskable icons must have a different purpose: "maskable". This indicates that an image is intended to be used with icon masks, giving you more control over the result. This way, your icons will not have a white background. You can also specify multiple purposes separated by spaces (for example, "any maskable"), if you want your maskable icon to be used without a mask on other devices.

{
 ...
 "icons" : [
 ...
 {
 "src" : "path / to / maskable_icon.png" ,
 "sizes" : "196x196" ,
 "type" : "image / png" ,
 "purpose" : "any maskable"
 }
 ]
 ...
 }

With this, you can go ahead and create your own masqueable icons, making sure your app looks good from edge to edge (and for what it's worth, circle to circle, oval to oval 😄).