Apple touch icon: size, setup & best practices
The apple-touch-icon is the icon iOS and iPadOS use when someone adds your site to their home screen. Get the size and markup right and it looks crisp; get it wrong and you get a black box or a blurry, downscaled image.
What is an apple-touch-icon?
When a visitor taps Share → Add to Home Screen in Safari, iOS looks for a link tag with rel="apple-touch-icon". That image becomes the app-like icon on their home screen, in the app switcher and during some sharing flows. It is a separate asset from your browser favicon and follows its own rules.
The correct size: 180×180
Modern iPhones and iPads use a 180×180 px PNG. Older devices used 152, 144, 120 and 114 px, but a single 180×180 image is automatically scaled down for those, so one file covers almost every device today.
| Device | Recommended size |
|---|---|
| iPhone (Retina, modern) | 180×180 |
| iPad Pro / iPad (Retina) | 167×167 / 152×152 |
| iPhone (older, 2×) | 120×120 |
How to add it
Drop a square PNG named apple-touch-icon.png in your site root and add one line to your <head>:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Because the file sits at the root and keeps the default name, iOS will find it even without the tag — but adding the tag makes the intent explicit and lets you point to a custom path.
Design rules that matter
- Use a square image. iOS masks the corners itself; do not pre-round them.
- No transparency. iOS composites transparency onto black, which is the classic "my icon is a black square" bug. Fill the background.
- Keep art inside the safe area. Leave a margin so nothing is clipped by the rounded mask.
- Do not add a border or drop shadow — iOS applies its own.
Common problems and fixes
Black box instead of my icon
Your PNG has a transparent background. Re-export it with a solid or gradient background, then remove and re-add the home screen shortcut.
Blurry icon
You supplied a small image and iOS stretched it. Always use 180×180 or larger (downscaling stays sharp; upscaling does not).
Icon did not update
iOS caches home screen icons aggressively. Delete the old shortcut and add it again; changing the file name or appending ?v=2 to the href also forces a refresh.