Guides › PWA Icons and Maskable Icons: What Web Developers Need to Know
PWA Icons and Maskable Icons: What Web Developers Need to Know
Why a Progressive Web App needs more than a favicon, and what "maskable" actually means in a web app manifest.
A Flutter web build that only ships a favicon is leaving a noticeable gap: the moment a user tries to "install" the app to their home screen or app drawer as a Progressive Web App, the operating system needs a set of properly sized icons described in the web app manifest — and increasingly, it needs a maskable variant of those icons too.
Standard icons vs. maskable icons
A standard PWA icon is just a PNG at a couple of common sizes (192×192 and 512×512 cover most cases) referenced in manifest.json. A maskable icon is the same idea, but drawn with extra padding around the actual logo, because the operating system reserves the right to crop a maskable icon into whatever shape its home screen uses — circle, squircle, rounded square — the same way Android's adaptive icons work.
Without the extra padding, a maskable icon's logo can end up clipped at the edges the moment the OS applies its mask — exactly the same failure mode as an Android adaptive icon drawn without a safe zone.
Why both variants are worth shipping
Not every platform respects the maskable purpose flag the same way, and some browsers fall back to the standard icon if no maskable one is present (or vice versa). Shipping both — a plain icon for platforms that display it as-is, and a padded maskable version for platforms that crop it — covers both cases without relying on any one browser's specific behavior.
Ready to generate your icons? Open FLogo Generator.