Maskable icons

Maskable icons are a new way to optimize the layout of PWA icons on recent Android devices.

We'll cover the following

The starting problem

In past Android versions, icons could have any shape. However, in the most recent version, some manufacturers decided to introduce consistency on the device and display all the icons using the same form.

widget

Other manufacturers followed the same trend and introduced new kinds of shapes.

Source: https://developer.android.com/
Source: https://developer.android.com/

Android adaptive icons

Android Oreo (version 8 or API level 26) added the adaptive icons, allowing us to display various shapes across different device models.

An adaptive icon has two separate layers:

  • a foreground image
  • a background color or image

This allows Android to mask the icon into different shapes.

Source: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
Source: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

From Android 8, it is possible to choose from different shapes from a menu and render all icons in the same way.

widget

Below the different shapes are applied to the same icon set.


widget
widget

However, adaptive icons also affect the icon of a PWA once installed on the home screen. This is why since the release of Android Oreo, some PWA icons show a white background instead of using all the available space.

Source: web.dev/maskable-icon
Source: web.dev/maskable-icon

Maskable icons

To avoid this inconvenience, maskable icons have been introduced.

The idea is to keep the core section of our icon designs within a safe area, which is a central portion of the image with a radius equal to 40% of the minimum icon width and height.

The icon inside the safe area is guaranteed to be displayed independently from the rendered shape, while outside of this portion, it might get cropped, according to which icon shape is used.

widget

Once we create maskable icons, we also need to specify their purpose in the web manifest, as discussed in the previous lesson.

Press + to interact
{



     "icons": [

    {

      "src": "/images/icons-144.png",

      "type": "image/png",

      "sizes": "144x144",

      "purpose": "maskable"

    }

 ]

}

Maskable​ icons editor

Having to edit our images correctly can be a long and annoying task. Luckily for us, we can use an online tool to quickly and easily edit our icons.

Once we upload an image, we can edit the final padding according to its dimensions to make it fit within the safe area. We can also see how the image will be rendered in different shapes to have a convenient overview of all possible cases.

widget