Adaptive icon support in PWA with maskable icons

What are maskable icons?

Si ha instalado una aplicación Web progresiva en un teléfono Android reciente, es posible que observe que el icono aparece con un fondo blanco. Android Oreo introdujo íconos adaptables, que muestran íconos de aplicaciones en una variedad de formas en diferentes modelos de dispositivos. Los iconos que no siguen este nuevo formato tienen un fondo blanco.

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?

Dado que los íconos enmascarables deben admitir una variedad de formas, proporcione una imagen opaca con algo de relleno que el browser puede recortar posteriormente en la forma y tamaño deseados. Es mejor no depender de ninguna forma en particular, ya que puede variar según el navegador y la plataforma.

Fortunately, there is a well-defined and standardized «Zona mínima segura» que respetan todas las plataformas. Las partes importantes de su icono, como su Logo, deben estar dentro de un área circular en el centro del icono con un radio igual al 40% del ancho del icono. El borde exterior del 10% se puede recortar.

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. Sus iconos se recortarán de modo que solo el área segura be visible. Si su logotipo es visible dentro de esta área segura, está listo para comenzar.

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 😄).