Maskable Icons - Android PWA

Published December 21, 2023

Overview 

Progressive Web Apps (PWAs) icons are uploaded in the web manifest section of Eventfinity Dashboard. These icons are used in device notifications and serve as the main icon on the homescreen used to open the app. 

Android Oreo introduced adaptive icons, which display app icons in various shapes across different device models. Icons that don't follow this new format are given white backgrounds. 

Maskable icons are a new format that gives you more control and lets your Progressive Web App use adaptive icons. If you supply a maskable icon, your icon can fill up the entire shape and look great on all Android devices. If you elect to not mask your icon, it will appear inside of a white circle.

Example

Here is an example of how the Android PWA app would handle a 512 x 512-pixel image loaded as a web manifest icon not using the mask feature and one that is masked.

Original uploaded image

How To Enable the Mask

1. Navigate to Event Settings | Web Manifest
2. Add either a 512 x 512, or 192 x 192 pixel icon
3. Under the purpose option, select maskable
4. Check the device device notification box 
5. Save