As part of my work to support Progressive Web Apps in Firefox Preview, I implemented support for a recent web specification called “maskable icons”. Maskable icons allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other icons on the device. On Android, this lets developers get rid of the default white background around their icons and use the entire provided space.
After implementing the new feature, I published an article about it on CSS Tricks. As the first article on the subject since the original specification, it has now become the definitive resource for learning about maskable icons.
Alongside the launch of the article I published Maskable.app. This application lets web developers open their Progressive Web App icons and preview how they are displayed in various configurations on Android devices. The tool has been featured on New in Chrome, web.dev, and Google Developer Days China.