apple-touch-icon: the iOS icon your website forgot

Drop an apple-touch-icon link tag into your HTML and iOS will love you. Skip it, and every iPhone user who saves your site to their home screen gets... a screenshot of your page, cropped and unrecognizable.

The strange part: this has been true for over a decade, and sites still ship without it. Here's what the tag does, the one size that matters, and the two traps that make even shipped icons look wrong.

iOS ignores your favicon. On purpose.

Safari on iPhone and iPad never reads favicon.ico. For the browser tab on macOS, yes. But "Add to Home Screen", the most common way iOS users pin a web app or site, reads exactly one file:

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

If the tag is missing, iOS falls back to a screenshot of your viewport — which looks like a receipt, not a brand.

The size: exactly 180×180

Apple's spec calls for 180×180 PNG. Older tutorials list 152×152 or 120×120 — those are pre-iOS generations. Ship the single 180×180 file; iOS scales it internally for every placement. If you maintain a full icon set, apple-touch-icon.png at 180×180 is the file iOS wants.

Trap 1: transparency turns black

Your logo is a beautiful transparent PNG. iOS composites it onto a solid black square. A dark wordmark becomes invisible; a colorful mark gets a black slab behind it.

Fix: bake your brand background color into the export. The icon should look complete as a square tile — iOS applies its own rounded-corner mask on top, so full-bleed backgrounds are safe and encouraged.

Trap 2: don't pre-round the corners

Because iOS rounds the icon for you, pre-rounded source images get double-masked: your rounded tile ends up with weird black scallops at the corners. Export square artwork with edge-to-edge background and let the OS do the shaping.

Bonus: Safari pinned tabs on macOS

Safari on the Mac also reads an icon for pinned tabs — historically via mask-icon, now largely replaced by SVG favicon support with prefers-color-scheme. If your audience skews Apple-heavy, it's worth handling both: the home-screen icon for iOS, the tab icon for macOS Safari.

The 30-second audit

Want to know what your site actually serves?

1. Open your page source and search apple-touch-icon. No match = every iOS home-screen save is a screenshot.
2. Check what the URL resolves to — a 404 behind the tag is worse than no tag, on some iOS versions.
3. Tools like the Favicon Checker read a live page and list every icon it declares, apple-touch included.
4. Building the icon from scratch: upload a square logo (or generate one from text or emoji) to favicon.one and the package includes apple-touch-icon.png at the right size with the background baked in — free, everything runs in the browser.

Full guide with per-OS behavior and the Safari pinned-tab details: The apple-touch-icon guide.