Apple Touch Icons and Android Icons: A Mobile Icon Guide

Why Mobile Icons Are Different

A favicon is built for a browser tab, where it appears at a small size. A home screen icon, on the other hand, sits next to native apps and needs to look just as crisp and substantial as they do. Phones render it much larger, so a tiny tab favicon would look blurry there.

That is why iOS and Android each ask for their own larger, dedicated icons. Setting them up correctly is what separates a site that feels half-finished on a home screen from one that looks like a real app.

Apple Touch Icons for iOS

Apple devices look for a special file called the apple-touch-icon when a user adds your site to their home screen. The universal size is 180 by 180 pixels, which covers modern iPhones and iPads.

There are two quirks worth remembering with iOS icons:

• Do not add rounded corners. iOS rounds the corners automatically. If you round them yourself, the result looks doubly clipped.
• Avoid transparency. Transparent areas are filled with black on iOS, so use a solid background color instead.

You link it with a single tag:

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

Android Icons and the Manifest

Android Chrome takes a different path. Instead of a single link tag, it reads a web app manifest, a small JSON file that lists your icons. The two key sizes are 192 by 192 and 512 by 512 pixels.

A basic manifest looks like this:

{
  "name": "Your Site",
  "icons": [
    { "src": "/192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Then you point your HTML to the manifest file:

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

Maskable Icons Explained

Android phones crop icons into different shapes depending on the device, such as circles or rounded squares. A maskable icon is designed with extra padding around the artwork so nothing important gets cut off when the system applies its shape.

To enable it, add a purpose value in your manifest entry:

{ "src": "/512x512.png", "sizes": "512x512",
  "type": "image/png", "purpose": "maskable" }

Keep the main logo within the central area, roughly the middle 80 percent, and let the rest serve as a safe margin.

Putting It All Together

For full mobile coverage, you want this short checklist in place:

• A 180x180 apple-touch-icon linked in your HTML
• 192x192 and 512x512 PNG icons listed in a manifest
• A maskable version for clean Android cropping
• A solid background on the iOS icon to avoid black fills

Design Differences Between iOS and Android

The same logo can look great on one platform and awkward on the other if you ignore how each one treats icons. A little awareness of those differences helps you design one image that works well on both.

iOS keeps things uniform. Every home screen icon is rendered as a rounded square of the same shape, and the system applies that rounding for you. Your job is to supply a full square with a solid background and the artwork comfortably inside it. Apple does not crop into circles, so you do not need extra padding for shape changes, but you do need to avoid transparency.

Android is more varied. Different manufacturers and launchers crop icons into different shapes, from circles to squircles to rounded squares. This is why the maskable icon concept exists. By keeping your logo within a central safe zone and treating the outer area as expendable margin, you ensure the icon survives whatever shape the device applies.

Splash Screens and Theme Colors

When your site is installed and launched from a home screen, the icon is only part of the experience. The manifest also controls the splash screen that appears while the app loads and the color of the browser interface around it.

Two manifest values handle this. The background_color sets the splash screen color, and the 512 pixel icon is shown in the center while the app starts. The theme_color tints the surrounding system bars to match your brand. Setting both makes the launch feel deliberate rather than a plain white flash.

{
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "display": "standalone"
}

The display value of standalone is what makes the installed site open without the usual browser address bar, giving it that app-like feel.

Testing Your Home Screen Icons

Mobile icons are easy to get slightly wrong and easy to verify once you know where to look. Take a few minutes to test on real devices before considering the job done.

• Add to home screen on iOS. Use the share menu to add the site, then confirm the icon has a solid background with no black box and is not double-rounded.
• Add to home screen on Android. Check that the icon is sharp and that the maskable version is not clipping your logo when the launcher applies its shape.
• Launch the installed app. Watch the splash screen and confirm the background and theme colors look right.
• Use browser dev tools. Most desktop browsers can audit a manifest and flag missing or incorrectly sized icons.

Troubleshooting Mobile Icons

• iOS shows a screenshot instead of the icon. The apple-touch-icon tag is missing or points to the wrong path. Add it and clear the saved shortcut.
• Android icon looks clipped. Your maskable icon does not have enough safe-zone padding. Keep the logo within the central 80 percent.
• A black background appears on iPhone. The icon has transparency. Replace it with a version that has a solid background.
• The old icon persists. Remove the saved home screen shortcut and add the site again, since these icons are cached on the device.

FAQs