Screenshots do a job in a PWA, not just in a store
Since Chrome 108 on Android, a manifest that includes a screenshots array gets a richer install dialog: instead of a one-line "Install app?" banner, users see a swipeable preview with your description and images, much like a store listing. Chrome on desktop does the same with wide screenshots. Sites that add them see more installs for the simple reason that the prompt finally explains what the app is.
The requirements are strict enough to trip people up:
- Each screenshot between 320 and 3840 px on every side, aspect ratio no more than 2.3:1.
- Every screenshot with the same
form_factormust share the same aspect ratio. form_factor: "narrow"for phone screenshots (portrait),"wide"for desktop. At least one of each if you want the richer UI on both.- PNG, JPEG or WebP; include
sizesandtype.
"screenshots": [
{ "src": "/screens/home-narrow.png", "sizes": "1080x1920", "type": "image/png", "form_factor": "narrow", "label": "Home screen with today's menu" },
{ "src": "/screens/home-wide.png", "sizes": "1920x1080", "type": "image/png", "form_factor": "wide", "label": "Desktop view" }
]The label is read by screen readers and shown in some dialogs — write a sentence, not a filename.
Framed vs raw: which to use where
Manifest screenshots should be raw — the actual app content at a phone aspect ratio (9:16 or 9:19.5), because Chrome displays them inside its own UI. Exporting from this tool with the no frame option and a plain background gives you exactly that.
Framed screenshots belong on your landing page, in blog posts announcing the app, on social media and, if you list on Google Play as a TWA, in the store listing. Play permits device frames as long as the frame doesn't misrepresent the app; keep the screen content honest and the caption factual.
Getting a clean source screenshot
- Take it from the installed app, not a browser tab — the address bar is the giveaway that a "screenshot of an app" is a website.
- On Android, install your PWA, open it, press power + volume down. On iPhone, add to home screen, open, press side button + volume up.
- Use demo content that looks real. Lorem ipsum and "Test User" undermine trust more than an empty state would.
- Hide personal data in the status bar or crop it; the tool's frame covers the status bar area on most presets.
Caption text that works
The draggable caption is for a benefit, not the app name — the icon already says who you are. "Order ahead, skip the queue" beats "Rosie's Bakery App". Keep it under about 30 characters so it survives on a 1080-wide export at the default size; the text stays editable with a double-click until you export.
3D view
The 3D mode renders the phone in WebGL so you can rotate and tilt it. It is meant for hero images and social cards where a flat front view looks static. Drag to rotate, use the sliders for a precise angle, and export at 1080p or 4K. The rendering happens on your GPU; nothing is uploaded.