maskable

Maskable is a designation used in web app manifests to indicate that an app icon is designed to be masked by the device launcher. It refers to the maskable value in the purpose field of an icon entry within a Web App Manifest. When a web app is added to a home screen or launched as a progressive web app, the operating system may apply a shape mask to icons (for example, circles or rounded rectangles). A maskable icon reserves space and content layout so that masking does not obscure important information.

Implementation and usage

In a manifest, each icon object includes properties such as src, sizes, type, and purpose. The purpose field can include one or more tokens: "any", "maskable", "badge", or a combination like "maskable any". Declaring "maskable" signals to the system that the icon is safe to mask and that its important visual elements should be placed within a central safe area. This enables icons to render cleanly across various shapes produced by different launchers.

Design considerations

Creators should provide maskable icons with transparent padding to accommodate masking across devices. Key content should be centered and kept away from the edges so it remains visible after masking. It is common to supply multiple sizes (for example 192x192 and 512x512) to support different screen densities and mask shapes. Testing across devices and launchers helps ensure that the icon remains recognizable when masked.

Relation to standards and support

Maskable icons are part of the Web App Manifest specification and are supported by major browsers that implement manifest-based installation for web apps. They complement non-maskable icons and badges to ensure consistent presentation in diverse launcher environments.