Safari · iOS · iPadOS
Apple Touch Icon: Size, HTML and Setup
Short answer
Save a 180×180 PNG as /apple-touch-icon.png and add <link rel="apple-touch-icon" href="/apple-touch-icon.png">. iOS uses it when someone adds your site to the home screen, and Safari looks for that file at the root even without the tag.
Checked against Apple: Configuring web applications, MDN: <link> and Evil Martians: How to favicon in October 2026.
The tag
<link rel="apple-touch-icon" href="/apple-touch-icon.png">One 180×180 icon is enough. iOS scales it for other devices.
Sizes
| Device | Size |
|---|---|
| iPhone (3x) | 180×180 |
| iPad Pro | 167×167 |
| iPad (2x) | 152×152 |
| iPhone (2x) | 120×120 |
To ship every size, add a tag each with sizes, e.g. <link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad.png">.
Design
- Full square with a solid background. iOS rounds the corners.
- Leave padding: about 140×140 of artwork on the 180 canvas.
- No gloss needed. Since iOS 7, Safari adds no effects, so
-precomposednames aren't needed.
Apple touch icon not showing: fixes
| You see | Why | Fix |
|---|---|---|
| Home screen shows a page screenshot | No touch icon found | Add /apple-touch-icon.png and the tag |
| 404s for apple-touch-icon in logs | Safari asks for it at the root | Put a file at /apple-touch-icon.png |
| Old icon on the home screen | iOS saved it when added | Remove the shortcut and add it again |
| Black corners | Transparent background | Use a solid background |
FAQ
What size is the apple-touch-icon?
180×180 px PNG.
Do I need the link tag?
Safari also looks for /apple-touch-icon.png at the root, but the tag is safer.
Does Google use the apple-touch-icon?
It can: Google Search accepts apple-touch-icon as a favicon source.
Should the corners be rounded?
No. iOS applies the rounded mask.