How to Setup Your Add to Home Screen Icon Favicon (2026)

Ever tapped 'Share' then 'Add to Home Screen' on your iPhone, expecting a slick app icon, but got a miniature, illegible screenshot of the webpage instead? I see this on production sites constantly. Your desktop tabs might look fine, but your mobile add to home screen icon favicon setup is likely incomplete.

Look at Stripe or GitHub. When you save their web apps to your phone, the icon sits on your home screen looking exactly like a native app downloaded from the App Store. They don't leave this to chance or rely on browser fallbacks. They explicitly define what the operating system should display.

Mobile browsers are notoriously lazy. If you don't explicitly tell iOS Safari or Android Chrome which image to use for the home screen shortcut, they panic. Safari takes a literal screenshot of your site. Chrome tries to stretch your tiny 32x32 desktop favicon into a massive 192x192 square. Both results look terrible and destroy your brand's credibility.

The 3-Step Setup for Home Screen Perfection

You don't need a massive block of legacy HTML tags to fix this. In 2026, we only need to satisfy two major players: Apple (iOS) and Google (Android). Here is exactly how to do it.

Step 1: Create the Apple Touch Icon (iOS)

Apple stubbornly ignores standard web manifests for home screen icons. You have to feed Safari a specific link tag. The image must be a 180x180 pixel PNG.

(Do not use transparency here — iOS fills transparent areas with solid black, making your logo look like a ransom note. Always use a solid background color).

<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>

Place this tag right inside your <head>. For a deeper dive into iOS quirks, check our Apple Touch Icon setup guide.

Step 2: Configure the Web Manifest (Android)

Android devices look for a site.webmanifest file. This JSON file tells Chrome exactly how your site should behave when saved to the home screen, including which icon to use and whether to hide the browser UI.

Create a file named site.webmanifest in your root directory and add this code:

{
  "name": "Your App Name",
  "short_name": "App",
  "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"
}

Notice the display: standalone property. This is the magic line that removes the URL bar when a user opens your site from their home screen, giving it that native app feel.

Step 3: Link the Manifest in Your HTML

You need to point your HTML document to that manifest file. Add this right below your Apple touch icon tag:

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

Common Pitfalls to Avoid

Even senior developers mess this up. Here are the traps I see people fall into every week:

• Using SVGs for iOS: Safari still doesn't fully support SVG for the home screen icon. Stick to PNG. Read our SVG favicon guide to see where SVGs actually belong (hint: desktop tabs).
• Forgetting the background color: As mentioned, iOS hates transparency. Fill your PNG background with a solid brand color.
• Caching nightmares: If you update your icon, iOS will stubbornly hold onto the old one. Append a version query string like ?v=2 to the file path in your HTML to force an update.

Testing Your Implementation

Don't trust your desktop browser's dev tools for this. The only real way to test your add to home screen icon favicon is on a physical device.

Open your site on an iPhone, tap the Share button, and select 'Add to Home Screen'. Look at the preview icon. If it's your crisp 180x180 PNG, you win. Do the same on an Android device using Chrome's menu. If the icon looks pixelated, double-check your manifest paths.

Don't overcomplicate this process. You need exactly three files in 2026: a standard desktop icon, a 180px Apple Touch Icon, and a manifest with Android icons. If you need to generate these exact files from a single high-res logo, run it through Mzu favicondl and drop the output into your root directory. It handles the sizing and formatting automatically.