If you have ever tapped 'Add to Home Screen' on your iPhone and groaned because your site saved as a blurry, unreadable miniature screenshot of your homepage—your favicon setup is incomplete. Mobile browsers do not care about your legacy desktop icons. They expect a specific set of high-resolution assets to make your website feel like a native app.

Look at GitHub's mobile web experience. When you view their site in Safari's tab grid, you see a crisp, perfectly padded icon. Save it to your Android device, and it perfectly adapts to whatever icon shape your OS uses. They do not achieve this by accident. They use a targeted strategy for their favicon for mobile devices.

Stop trying to serve fifteen different icon sizes. In 2026, you only need a few specific files to cover 99% of mobile devices. I am going to show you exactly how to set this up.

Prerequisites for Mobile Icons

Before writing any code, you need the right source image. Do not use a 32x32 pixel file. You need a high-resolution, square version of your logo. I recommend starting with a 512x512 pixel PNG or a clean SVG. If your logo has text, drop it. Use the standalone brand mark so it remains legible on small smartphone screens.

Step-by-Step Mobile Favicon Setup

Step 1: Conquer iOS with the Apple Touch Icon

Apple is notoriously stubborn. Safari on iOS completely ignores standard favicon declarations when saving to the home screen or displaying in the mobile Safari tab overview. It demands a specific file called the Apple Touch Icon.

You need exactly one 180x180 pixel PNG. Do not use an SVG here; iOS will ignore it. Furthermore, iOS fills any transparent background with black. If you have a dark logo on a transparent background, it will become an invisible black-on-black square. Always use a solid background color for this specific file.

You can read more about the nuances of this in our Apple Touch Icon guide, but the implementation is just one line of HTML.

Step 2: Tame Android with the Web App Manifest

Chrome on Android handles icons entirely differently. Instead of looking for specific HTML tags, it looks for a JSON file called a web app manifest. This file tells Android how your site should behave when installed or viewed in the mobile task switcher.

For Android, you need two PNG sizes: 192x192 and 512x512. You define these inside a site.webmanifest file that lives in your root directory.

Step 3: Implement Maskable Icons

Android OEMs love different icon shapes. Samsung might use squircles, Pixel phones might use circles, and others use teardrops. If you do not provide a maskable icon, Android takes your square logo and shrinks it inside a white circle, which looks terrible.

By adding the purpose: 'maskable' property to your manifest, you give Android permission to crop your icon to fit the system's native shape. Just ensure your logo's main graphic is safely within the center 'safe zone' (the inner 80% of the image).

Step 4: The Final Code Integration

Here is the exact code you need to tie your favicon for mobile devices together. First, add this to your HTML <head> section:

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

<!-- Android / Chrome -->
<link rel='manifest' href='/site.webmanifest'>

<!-- Modern Mobile Browsers (SVG Fallback) -->
<link rel='icon' type='image/svg+xml' href='/icon.svg'>

Next, create your site.webmanifest file with the following JSON structure:

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

Common Pitfalls to Avoid

If you want to dive deeper into Android specifics, check out our detailed Web App Manifest Favicon Guide.

Conclusion

Getting your favicon for mobile devices right is a small detail that drastically elevates the perceived quality of your website. By providing a dedicated Apple Touch Icon and a well-configured web app manifest, you ensure your brand looks professional on every smartphone and tablet.

Instead of manually resizing images and writing JSON files by hand, you can use Mzu favicondl. Upload your high-resolution logo, and our tool will generate the exact mobile-optimized PNGs, SVGs, and manifest files you need for 2026.