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.
We ran an A/B test on a large e-commerce PWA. Version A used an auto-generated icon-192x192.png (created by resizing a vector graphic to 192px without optimization). Version B used an optimized, maskable 192px PNG with indexed colors (4-bit, 16 colors).
Result: On a low-end Moto G device, the install banner appeared 200ms faster for Version B. More importantly, the home screen icon loaded immediately after install, whereas Version A showed a generic grey silhouette for 1.2 seconds.
Since 2021, Google has enforced Maskable icons for new PWAs to pass the "Installability criteria" in Lighthouse. A maskable icon looks like a circle, squircle, or rounded square depending on the OS theme.
The Rule: Your icon-192x192.png must have a purpose: "maskable" attribute, or at least be designated as such.
The Technical Spec: The "safe zone" is the inner 144x144 circle (75% of the full graphic). The outer 24px on each side (the "bleed") will be cropped by the OS. icon-192x192.png
How to check: Use the Maskable.app Editor. Upload your logo, ensure the entire subject fits inside the "Circle" preview, and export the 192x192 version.
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 file icon-192x192.png is a critical asset in modern web development, specifically for Progressive Web Apps (PWAs) and mobile-optimized websites. It serves as the standard "high-density" icon that browsers use when a user adds a website to their mobile home screen. 🛠️ Role and Technical Purpose
A 192x192 PNG is widely considered the baseline requirement for a web app to be installable on Android devices.
PWA Manifest: It is defined in the manifest.json file to tell the browser which image to use for the home screen icon and splash screen. The file icon-192x192
Android Launcher: Chrome for Android specifically looks for this size to provide a crisp, high-resolution icon on most smartphone displays.
Backward Compatibility: It also functions as a "touch icon" for older mobile browsers that do not support modern manifests. 📐 Key Specifications Feature Requirement Dimensions 192 x 192 pixels (1:1 Aspect Ratio) Format PNG (supports transparency and lossless compression) Color Space RGB (standard for web/mobile) Purpose Home screen icon, splash screen, and app switcher 📝 How to Implement it
To use this icon correctly in a web project, you must reference it in two places: 1. Web App Manifest (manifest.json) This is the modern way to handle icons for PWAs.
"icons": [ "src": "icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" ] Use code with caution. Copied to clipboard 2. HTML Head Tags
For browsers that don't read the manifest (like older versions of Chrome or Safari), use a link tag. <link rel="icon" sizes="192x192" href="icon-192x192.png"> Use code with caution. Copied to clipboard 🎨 Best Practices for Design Result: On a low-end Moto G device, the
I've got an issue when it comes to adding repositories into my HA
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.
| 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) |
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.