PWA Icon Requirements
PWA icon requirements around size and format sound like a technical footnote, but the icon is the first thing a user sees before they even install. Here's which sizes the manifest actually needs, what a maskable icon is, and the mistakes that most often ruin that first impression.
Technical requirements for a PWA icon
A PWA manifest typically needs a set of icon sizes — at minimum 192x192 and 512x512 pixels in PNG, listed in the manifest's icons array. Different sizes serve different purposes, from the home screen to the launch splash screen, so a missing size can mean the system falls back to an upscaled, blurry version instead of a crisp icon.
Why the icon is the actual first impression
The icon shows up in the install prompt and on the home screen before a user sees a single element of the storefront itself. It works together with the name: a clean, legible icon paired with a clear name is what lowers distrust before the page ever opens.
Common icon mistakes
The most common mistake is a low-resolution icon stretched up, which looks blurry on screen. The second is insufficient padding for the maskable format, which lets the system's mask crop off important elements like text or a logo into a circle or a rounded square. The third is a style mismatch with the offer's vertical — an icon that looks like a game on a finance offer reads as a mismatch.
What a maskable icon is and how to test it
A maskable icon keeps a safe zone of padding around the edges, because the operating system crops it to its own shape — circle, squircle, rounded square — depending on the device. Test it against several mask shapes and against both light and dark home-screen backgrounds — an icon that looks fine on white can disappear into a dark theme.
How to assemble a correct icon set quickly
Preparing every size and format by hand for every funnel is tedious, and it's easy to miss one size, which partially breaks the manifest. APEX's storefront builder generates the full set of icon sizes automatically from a single uploaded image, including the maskable safe zone, taking that routine off the buyer's plate.
FAQ
- What's the minimum icon size a PWA needs?
- The practical minimum is 192x192 and 512x512 pixels in PNG, which covers most install and splash-screen scenarios. Smaller icons get scaled up by the system and lose sharpness.
- What is a maskable icon and why does it matter?
- It's an icon format with extra padding at the edges that lets the operating system crop it to its own shape without cutting off important elements. Without that padding, text or a logo on the icon can get sliced off by the device's mask.
- Can the offer's own logo be used as the icon?
- Yes, as long as it's legible at small size and matches the rest of the storefront's style — a detailed logo with fine details turns into an unreadable smudge at icon size.
- How does APEX simplify generating icons in the right sizes?
- Upload one image and the builder automatically generates the full set of manifest sizes, including the maskable safe zone, with no need to prepare each file by hand.
Cloaking, anti-bot, push, split tests and your own domains — in one service.
Get started free