Apple touch icon - MetricSpot docs

Q: What about Android home screens?

Android uses the web manifest to find icons — the icons array with 192x192 and 512x512 PNGs. The apple touch icon is iOS-only; ship both.

What this check does

Looks in <head> for a <link rel="apple-touch-icon"> element and verifies the referenced file exists and loads. iOS Safari uses this icon when a visitor taps Share → Add to Home Screen.

Why it matters

When iOS users save your site to their home screen, you get a free app-store-shaped install — but only if you’ve provided the icon. Without it, iOS renders a blurry screenshot of the page at icon size, which looks broken and unloved. App-like presentation drives meaningfully higher return-visit rates.

Apple stopped requiring a touch icon for indexing years ago, so the check is about presentation and brand trust, not crawlability. But the cost is one PNG file and three lines of HTML, so there’s no reason to skip it.

How to fix it

Add a 180×180 PNG to your site root and link to it:

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

iOS first looks for /apple-touch-icon.png at the domain root even without a <link> tag — so just placing the file there often works. But shipping the explicit <link> is more reliable across older iOS versions and modern third-party clients (Slack, Discord, RSS readers) that use it for previews.

Single-size approach (recommended for most sites):

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

180×180 is the largest size iOS asks for. iOS scales down for smaller targets — one image is enough.

Multi-size approach (only if you have brand reasons to optimize each):

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

Design guidance:

PNG only. JPEG creates artifacts on solid backgrounds; SVG isn’t supported.
No transparency. iOS applies a rounded-corner mask and adds a subtle gloss on older iOS versions — design for a square canvas, full bleed.
Make it readable at the smallest size (76×76 on older iPads). A wordmark works; a 20-character tagline doesn’t.
Pair with a theme color meta and a web manifest for the full home-screen experience on both iOS and Android.

Generate from one source:

RealFaviconGenerator takes one source image and outputs the touch icon, the favicon set, the manifest, and the HTML to paste — covers iOS, Android, Windows tiles, and PWA installability in one pass.

Astro: drop the icons in public/ and add the link to BaseLayout.astro’s <head>.

Next.js: put apple-icon.png (180×180) directly in app/ — the App Router auto-generates the <link> tag.

app/
  apple-icon.png   # 180×180
  favicon.ico
  layout.tsx

WordPress: most modern themes accept a touch icon under Appearance → Customize → Site Identity. Otherwise, place the PNG in your theme root and add the <link> to header.php.

Frequently asked questions

What about Android home screens?

Android uses the web manifest to find icons — the icons array with 192x192 and 512x512 PNGs. The apple touch icon is iOS-only; ship both.

Do I need `apple-touch-icon-precomposed`?

No. That variant told older iOS versions not to apply the gloss effect. iOS removed the gloss in iOS 7 (2013); modern devices ignore the precomposed variant entirely. Stick with apple-touch-icon.

Will browsers reload the icon when I update it?

iOS caches the icon aggressively. Add a query string when you replace it (href="/apple-touch-icon.png?v=2") so cached copies update. Same trick works for the favicon.