Apple touch icon guide: size, transparency and HTML

Updated: 2026-10-27 · AnyToolsKit

When someone adds your site to the home screen on an iPhone or iPad, iOS uses the Apple touch icon. One 180×180 PNG covers every current device — as long as you avoid a few common mistakes.

The one tag you need

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

Use a 180×180 px PNG. iOS scales it down for older devices and Spotlight. If you omit the tag, Safari still looks for /apple-touch-icon.png at your site root, so naming the file exactly like that is a good fallback.

No transparency, no rounded corners

• iOS applies its own rounded-square mask. If you round the corners yourself, the result looks doubly rounded.
• Transparent areas are filled with black on iOS, which ruins most logos. Always use a solid background color.
• Leave a margin of roughly 10% around the artwork so it does not touch the mask edges.

The Favicon Generator handles this automatically: it places your image on a solid background (you choose the color) with padding, at exactly 180 px.

Old sizes you can drop

Earlier guides listed 57, 60, 72, 76, 114, 120, 144 and 152 px variants with sizes attributes. They were needed for iOS 6 and early iPads. Today a single 180 px file is enough; extra sizes do no harm but add maintenance.

Precomposed icons

Before iOS 7, Safari added a glossy highlight unless you used apple-touch-icon-precomposed. That effect no longer exists, so the plain apple-touch-icon is all you need. Some Android browsers still read the precomposed name; including a copy is optional.

Testing

1. Open your site in Safari on an iPhone or iPad.
2. Tap the Share button, then Add to Home Screen.
3. The preview in the dialog shows the icon iOS will use. If you see a page screenshot instead, the file was not found.