Your manifest.json might live at root/manifest.json, but your icon is at root/assets/icon.png.
Error: Site cannot be installed: no matching service worker detected. Waiting for icon to load.
Fix: Use absolute paths: "/assets/icons/icon-192x192.png". Relative paths break if your start URL is not the root.
As devices evolve to foldable screens and ultra-high DPIs (960 DPI+), Google may bump the requirement to icon-384x384.png or support SVG icons natively. However, as of 2025, the Android compatibility definition document (CDD) still mandates that launchers support 192px icons.
Furthermore, Apple's "add to Home Screen" for iOS (which uses a different <link> tag, apple-touch-icon) also recommends a size of 180px—remarkably close to 192px. By mastering the icon-192x192.png standard, you are 95% of the way to perfecting iOS home screen icons as well.
On Windows 10/11, pinned site tiles may use 192px icons. For Android adaptive icons, the 192px version is used as the foreground or background layer in newer implementations. icon-192x192.png
While Apple recommends 180x180 for iOS home screens, icon-192x192.png is often used as a fallback if an Apple-specific icon is missing. iOS will scale the icon down if necessary.
Including a properly formatted icon-192x192.png is a small detail that signals a professional, polished web application. It bridges the gap between a traditional website and a native mobile app, ensuring brand consistency across all platforms.
The icon-192x192.png file is a standard asset used primarily in Progressive Web Apps (PWAs) to ensure your application looks professional when installed on a user's home screen or app drawer. Your manifest
To "generate a long feature" around this asset, you need to implement a full Web App Manifest configuration. This is the JSON file that tells the browser how your web app should behave when installed as a standalone application. Core Implementation: The Web App Manifest
A "long feature" for this icon involves defining how the app identifies itself, its theme colors, and how it handles various display modes. Create a file named manifest.json in your root directory with the following structure: My personal blog - Built with Blocs
| Attribute | Specification |
| :--- | :--- |
| File Extension | .png |
| Dimensions | 192x192 pixels (square aspect ratio 1:1) |
| Color Depth | 24-bit RGB (16.7 million colors) + 8-bit alpha channel (transparency) |
| Compression | Lossless (deflate algorithm, same as zlib) |
| Interlacing | Not recommended (progressive rendering is rarely needed for icons) |
| Typical File Size | 3 KB – 15 KB (depending on complexity and optimization) | Example manifest entry:
The most critical use of icon-192x192.png is in the Web App Manifest. When a user installs a PWA, the browser uses icons of various sizes for different purposes. The 192px icon is specifically used as:
Example manifest entry:
"icons": [
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
]
The file icon-192x192.png refers to a square image with dimensions of 192 pixels by 192 pixels. It is most commonly referenced within the manifest.json file—a JSON file that tells the browser how a web app should behave when "installed" on a user's device.