Favicon for Android Add to Home Screen: The 2026 Setup

You tap the three-dot menu in Android Chrome, hit "Add to Home Screen," and a generic first-letter placeholder appears on your launcher. The browser ignored your carefully crafted favicon. This guide fixes that exact scenario for the favicon for android add to home screen flow.

Android Chrome does not read your standard <link rel='icon'> tag when a user installs your site. It reads your web app manifest. If your manifest is missing, malformed, or missing the right icon entries, the shortcut on the Android home screen falls back to a screenshot or a generic glyph.

Prerequisites

You need three things before touching any code:

• A square source icon, ideally exported from a vector file at 512×512 PNG.
• A reachable manifest.json served from your site root with a valid Content-Type: application/manifest+json header.
• A testable Android device or emulator running Chrome 100 or later.

Step-by-Step: Configure Your Favicon for Android Add to Home Screen

1. Export two icon sizes from your source artwork

Android Chrome prefers a 192×192 icon for the install dialog and a 512×512 icon for the splash screen that briefly appears after the shortcut is added. Export both as PNG. The W3C manifest specification defines these as the two mandatory sizes values for purpose: 'any' icons. See W3C Web App Manifest: icons member for the formal schema.

2. Build a maskable variant for adaptive launchers

Android launchers crop square icons into circles, squircles, or rounded squares depending on the device. A regular 512×512 PNG will get its corners sliced off. Create a maskable version: your full art sits inside a safe zone covering the central 80% of the canvas, with the remaining 20% acting as transparent padding the launcher can crop without losing detail.

Save it as icon-maskable-512.png. For a deeper look at the safe zone math, see our maskable icon guide.

3. Write the manifest.json

Drop this into your site root and adjust the paths:

{
  "name": "Your App Name",
  "short_name": "Short",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

The purpose field is the key difference between a favicon for android add to home screen that looks crisp and one that looks chopped. The manifest spec defines 'any' for standard icons and 'maskable' for icons designed to survive launcher cropping.

4. Link the manifest from every page

Android Chrome will not discover your manifest unless a <link> tag is present in the HTML head of every page a user might install from. Add this:

<link rel='manifest' href='/manifest.json'>

Place it next to your favicon declarations, not inside the body. Browsers ignore link tags they find after parsing closes the head.

5. Set the theme color so the address bar matches

While you are in the head, add a matching theme color so Chrome's top bar tints when the site is launched from the home screen:

<meta name='theme-color' content='#000000'>

6. Test the real install flow

Open your site in Android Chrome on a physical device. Pull up the three-dot menu and tap "Add to Home screen." The dialog preview should show your 192×192 icon, not a letter or screenshot. Confirm and check the launcher — the icon should fill its shape without clipping important details.

If you see the wrong icon, read the next section.

Common Pitfalls Specific to Android

• Missing purpose: 'maskable' entry: Android launchers will crop your regular PNG and your brand mark may end up halfway off the icon.
• Serving icon-512.png without the manifest: Chrome falls back to a screenshot, which looks terrible against the user's wallpaper.
• SVG icons in the manifest: Android Chrome does not reliably render SVG manifest icons on all devices. Stick to PNG.
• Apple Touch Icon confusion: The apple-touch-icon tag is iOS-only. Android ignores it entirely.
• Stale Chrome cache: If you recently edited manifest.json and the install dialog still shows the old icon, clear site data from Chrome settings or open the site in an Incognito tab.

Verifying Your Work

Use a favicon checker online to confirm your manifest is parseable and your PNGs resolve over HTTPS. Mzu favicondl can export both the 192×192 and 512×512 PNGs from a single source file and produce the matching maskable variant, which saves a manual Figma step. Then walk through the install flow on at least one Pixel device and one Samsung device — their launcher shapes differ noticeably, which is exactly why the maskable variant matters.

Configuring a favicon for android add to home screen comes down to a properly declared manifest.json with a 192×192 entry, a 512×512 maskable entry, and a <link rel='manifest'> tag on every page. Skip the maskable variant and your icon will be cropped. Skip the manifest entirely and Android will screenshot your page instead. Get those three files right, and the shortcut on a user's home screen will look like it belongs there.