Android adaptive icons for Progressive Web App (PWA): Maskable Icons Guide

You have created a progressive web application (PWA) and designed the corresponding icon, which is now being installed on the Android home screen. However, if you are using a newer Android phone, your icon may display as follows:

What's going on? Android Oreo introduces adaptive icons, a new icon format that forces all home screen icons to take the same shape. Icons that do not conform to the new format will be displayed as a white background.

However, a new web feature called maskable icons will be available in Firefox Preview and other web browsers soon. This new icon format will allow your PWA to have its own adaptive icons on Android.

I work in Mozilla and implement support for maskable icons in Firefox Preview. I'll show you how to add them to your own Android PWA.

What are maskable icons and adaptive icons?

A few years ago, Android app icons were in free form and could be any shape. This means that web apps can also reuse the same transparent icon when pinned to the home screen.

However, manufacturers like Samsung want to make all icons on the device have the same shape for consistency. Some manufacturers even want to use different shapes. To address various requirements for manufacturers and devices, Android introduced "adaptive icons". You provide an image with extra space around the edges, which Android will crop into the correct shape.

But web applications are designed to run on any platform, so they don't have an API to create these special Android icons. Instead, the icon will be squeezed into a white box like this:

It is gratifying that a brand new API appeared last September and was added to the W3C specification. Maskable icons allows web developers to specify a full bleeding icon that will be cropped. It is platform-agnostic, so Windows can use it for tile and iOS can use it for icons.

How to create maskable icons

Since the maskable icon format is designed to work with any platform, its size and scale are different from the size and scale of Android's adaptive icons. This means you cannot reuse the same resources.

Maskable icons can be any size, and you can continue to use the same size as a normal transparent icon. But when designing icons, make sure that important information is within the "Safe Area" circle with a radius equal to 40% of the image size.

Ensure that all pixels in this area are visible. Pixels outside the area may be cropped according to the icon shape and platform.

Warning: If you already have an Android app, avoid copying and pasting the icon from the Android app to the web app. The scales are different, so your icon looks too small.

Add icons to the web application manifest

After creating an icon, you can add an entry to the Web application manifest similar to other icon resources. The Web Application manifest provides information about the Web application in a JSON file and contains an "icons" array.

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

Maskable icons use a special new key "purpose" to indicate that they are intended to be used with the icon mask. The default "purpose" for an icon with a transparent background is "any", and each option can be separated by spaces to use multiple uses for the icon.

 <code>"purpose": "maskable any"</code>

Preview your icon

Do you want to see what your own maskable icons look like? I created a tool Maskable.app to help you evaluate how the icon looks under different shapes.

The app allows you to preview icons in various shapes that can be found on Android devices. I hope this tool helps you create unique icons for progressive web applications.

[View application] [View source code]

Once you are satisfied with the results, you can start testing your application. Firefox Preview Nightly and Chrome Canary both support maskable icons. You can use them to see how your PWA looks.

Tools like PWACompat also support maskable icons. You can automatically generate icons for iOS and other devices based on the new maskable icons!

Start creating your own icons

If you want more control over how PWA icons appear on Android, maskable icons are your best choice. With maskable icons, you can customize the edge-to-edge display of icons. Hope this article helps you start creating the first maskable icon.

Icon source:

• http://ipnx.cn/link/258b55f3d6bc1cafb846ac3bbe5bc643
• http://ipnx.cn/link/55a85e71b468ef171a7d4509b3f35f36
• http://ipnx.cn/link/284c1ffedc349416c5a95b82a0f6a6d7
• http://ipnx.cn/link/e5f6b927ce20f43fb7d5247109be554a
• http://ipnx.cn/link/41be696537187bb3b209c20dafeb2a81

The above is the detailed content of Maskable Icons: Android Adaptive Icons for Your PWA. For more information, please follow other related articles on the PHP Chinese website!