Answer

What is a maskable icon?

Short answer

A maskable icon is a PWA icon designed with extra padding around the logo so that when Android applies its adaptive-icon mask — a circle, squircle or rounded square, depending on the device’s launcher theme — the important part of the logo is never clipped. You declare it by adding "purpose": "maskable" to an icon entry in the manifest, ideally alongside a separate "any" purpose icon.

By InstantPWA engineering·Reviewed July 25, 2026

Why it is needed

Without a maskable variant, Android can crop a regular square icon into a circle, cutting off the edges of a logo that fills the whole canvas.

The safe zone

Google recommends keeping the important content within the inner 80% (a roughly 40% radius from centre) of the icon canvas so it survives any mask shape.

Testing tools

Sites like maskable.app let you preview how an icon looks under different mask shapes before shipping.

Sources

web.dev — Maskable icons

What icon sizes does a PWA need?

A PWA manifest needs at least a 192x192 and a 512x512 icon to be installable on Chromium browsers. For best results across platforms, also include a maskable icon (so Android does not crop your logo oddly) and a separate 180x180 apple-touch-icon link for iOS Safari, which does not read the manifest for its home-screen icon.

What is a Web App Manifest?

A Web App Manifest is a JSON file — usually manifest.webmanifest — that declares your app’s name, icons, start URL, theme colour and display mode. Browsers read it to decide whether to offer the install prompt and what icon and name to show on the home screen.

How do you handle safe areas in a PWA?

To avoid content being obscured by notches, camera cutouts or the home indicator on modern phones, set <meta name="viewport" content="viewport-fit=cover"> and then apply padding using the CSS environment variables env(safe-area-inset-top), -right, -bottom and -left, which report the exact inset needed on the current device in standalone or fullscreen mode.

Can a PWA use Face ID or Touch ID?

Yes. The Web Authentication API (WebAuthn) lets a PWA prompt for the device’s built-in biometric authenticator — Face ID and Touch ID on Apple devices, Windows Hello on PC, or a fingerprint sensor on Android — to register or verify a user without ever handling the raw biometric data, which stays on-device. It is widely supported across modern Chrome, Safari, Edge and Firefox.

What is a passkey and can a PWA use one?

A passkey is a phishing-resistant credential built on the WebAuthn standard that replaces passwords: it is a cryptographic key pair, unlockable with the device’s biometric sensor or PIN, that can sync across a user’s devices via their platform account (Apple iCloud Keychain, Google Password Manager). A PWA can offer passkey sign-in using the same navigator.credentials API as any website — no native app is required.