- icon-192x192.png
"name": "My Progressive Web App", "short_name": "MyPWA", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#000000", "icons": [
The standard manifest.json block maps the icon source, types, and strict resolution boundaries: Use code with caution.
: This resolution is suitable for use on smartphones. Many smartphones have high-density screens that require high-resolution graphics. A 192x192 icon is crisp on these devices and can serve as an app icon. icon-192x192.png
"icons": [ "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" ] Use code with caution.
To make your app installable, you must define the icon in your manifest.json file. This tells the browser exactly which file to use for different UI contexts. A 192x192 icon is crisp on these devices
: Keep your main logo or graphic within the center 80% of the image. Some operating systems may mask your icon into a circle or square with rounded corners.
To ensure compatibility across all devices, your icon-192x192.png should meet these technical standards. This tells the browser exactly which file to
For iOS and older Android versions, add these standard icons in <head> :
Many platforms (like Android and iOS) automatically add their own masking, rounded corners, or drop shadows. A transparent background is acceptable, but a solid background (matching your brand color) often gives you more control. However, be aware that iOS expects a non-transparent icon; otherwise it will fill transparency with black.