Android Chrome Icon 192x192 — Add to Home Screen Favicon

Android Chrome Icon 192x192

The 192x192 icon is used by Android Chrome when a user adds your website to their home screen. Unlike Apple, Android uses the web app manifest to define icons and supports additional features like maskable icons.

Web App Manifest

Android Chrome reads icon information from a manifest.json (or site.webmanifest) file:

{
  "name": "My Website",
  "short_name": "MySite",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Link the manifest in your HTML:

<link rel="manifest" href="/site.webmanifest">

Maskable Icons

Android supports maskable icons that adapt to different device-specific shapes (circles, squares, rounded squares, squircles). To support this:

• Safe zone: Keep important content within the inner 80% of the icon (a centered circle with 80% diameter)
• Background: Fill the entire 192x192 canvas with a solid background color
• Declare as maskable: Add "purpose": "maskable" to the manifest entry

{
  "src": "/android-chrome-192x192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable any"
}

Design Guidelines

• Use a solid background color rather than transparency
• Center your logo or symbol with generous padding
• Test with circular, squircle, and rounded-square masks
• Ensure the icon is recognizable alongside native Android app icons
• Consider creating separate maskable and standard icon versions