You save your favorite web app to your iPhone home screen, expecting your polished logo. Instead, you get a tiny screenshot of the entire page — pixelated and unreadable. The culprit isn't your design. It's that you shipped the wrong favicon sizes for mobile home screen requirements.

Mobile home screens treat your site like an installed app. That means they need a high-resolution, square image that can scale from small thumbnails to large launchers without falling apart.

What "Mobile Home Screen Icon" Actually Means

A favicon (browser tab) at 16x16 or 32x32 pixels is a completely different beast from a mobile home screen icon. The browser tab icon sits in a tiny rectangle and competes with seven other tabs. A home screen icon lives in a 60–120 pixel slot on a grid of apps, often with rounded corners, drop shadows, and OS-level masking.

When a user taps "Add to Home Screen" in Safari or "Install App" in Chrome, the OS looks for specific HTML declarations. If it can't find the right sizes, it falls back to a screenshot of your page (iOS) or the standard favicon (Android). Neither looks professional.

Why Standard Favicon Sizes Fail Here

Most developers learn that a 32x32 ICO file is "enough" for favicons. That file works fine for browser tabs, bookmarks, and address bars. But the moment iOS needs a home screen icon, it expects a much larger Apple Touch Icon.

The 32x32 ICO file is technically square, but it lacks the pixel density needed for a Retina home screen launcher. iOS scales it up and you get the blurry mess users associate with "unfinished" web apps.

The Two Mobile Ecosystems, Two Size Rules

Mobile home screen requirements split into two camps, each with their own specification.

iOS: The Apple Touch Icon

Apple's documented behavior is to look for an HTML <link rel='apple-touch-icon'> tag pointing to a square PNG. Modern iOS (iOS 8+) treats the 180x180 size as the de-facto standard for iPhone home screens. Anything smaller and iOS will either reject it or scale it up, with predictable quality loss.

For iPad, you historically had multiple sizes. Today, you can ship a single 180x180 PNG and it covers most current devices — the apple touch icon 180x180 strategy works because iOS will scale a larger image down smoothly.

Android: The Web App Manifest

Android goes through the Web App Manifest, defined by the W3C. According to the Web App Manifest spec, the icons member accepts an array of image objects with explicit sizes, type, and purpose attributes.

The two sizes Android consistently expects:

If you also want a 'purpose': 'maskable' icon that survives Android's adaptive shapes (circles, squircles, rounded squares), you need a 512x512 PNG with a safe zone baked in.

The Minimal Mobile Home Screen Setup

HTML Implementation

Here is a minimal, working stack. Place it inside your <head>:

&lt;link rel='apple-touch-icon' href='/icons/apple-touch-icon-180.png' sizes='180x180'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icons/favicon.svg'&gt;
&lt;link rel='icon' type='image/png' href='/icons/favicon-96.png' sizes='96x96'&gt;
&lt;link rel='manifest' href='/site.webmanifest'&gt;

Your site.webmanifest should declare both Android sizes:

{
  'icons': [
    { 'src': '/icons/icon-192.png', 'sizes': '192x192', 'type': 'image/png' },
    { 'src': '/icons/icon-512.png', 'sizes': '512x512', 'type': 'image/png' },
    { 'src': '/icons/icon-maskable.png', 'sizes': '512x512', 'type': 'image/png', 'purpose': 'maskable' }
  ]
}

The rel='icon' syntax follows the HTML living standard, which is why we use type and sizes attributes instead of legacy formats.

Best Practices

  1. Design at 512x512 first. Starting at the largest size gives you clean downscaling to 180, 192, and 96.
  2. Use PNG, not JPEG. Home screen icons need transparency for OS-level masking. JPEGs force a solid background.
  3. Skip the precomposed tag. apple-touch-icon-precomposed is obsolete — iOS dropped glossy rendering years ago.
  4. Validate the manifest. A typo in sizes silently breaks Android home screen installs. Use Chrome DevTools' Application tab to verify.
  5. Cache-bust aggressively. Mobile OSes cache home screen icons for weeks. A versioned URL (e.g. ?v=2) forces a refresh after redesigns.

If you need to inspect what a site is currently serving, the favicon tester for all browsers guide walks through DevTools verification. For generating the package itself, Mzu favicondl can export all five files in one click.

The favicon sizes for mobile home screen aren't about generating dozens of files. They're about shipping the right three or four PNGs, declaring them correctly in HTML and the manifest, and verifying that the OS can actually find them.