The apple-touch-icon is the image iOS uses when someone adds your website to their iPhone or iPad home screen. It also appears as the Safari pinned-tab icon on Mac. Without it, iOS shows a generic screenshot thumbnail — a missed branding opportunity. This guide covers the exact size, the correct tag, and how to fix common audit failures.
The short answer
- Size: 180×180 pixels, PNG
- Filename:
apple-touch-icon.png - Tag:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
The apple-touch-icon link tag
Add this inside the <head> of every page:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">You can also declare multiple sizes for older devices, but 180×180 alone covers all modern iPhones and iPads (iOS scales it down automatically):
<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">Need a 180×180 PNG fast? Upload your logo to Favicon.one — the output package includes
apple-touch-icon.pngat the correct size.
Design guidelines for Apple touch icons
- Fill the whole square. iOS rounds the corners itself — don't pre-round them or add padding.
- No transparency. Use a solid background color; transparent areas render black on iOS.
- Keep it simple. At 180px and smaller, detail gets lost. Bold shapes and high contrast win.
- Test on a real device. Add your site to the home screen to see how it actually looks.
Why Lighthouse flags your apple-touch-icon
Google Lighthouse's PWA audit checks for a valid apple-touch-icon. Common failures:
- Missing tag entirely — add the
<link rel="apple-touch-icon">tag. - 404 on the file — confirm
/apple-touch-icon.pngactually exists and loads. - Wrong size — must be at least 144×144; 180×180 is recommended.
- Non-square image — the icon must have equal width and height.
Run your site through the Favicon Checker to verify.
apple-touch-icon vs favicon — what's the difference?
| favicon.ico / PNG | apple-touch-icon.png | |
|---|---|---|
| Used by | Browser tabs, bookmarks | iOS home screen, Safari pinned tabs |
| Size | 16, 32, 48 | 180×180 |
| Transparency | Supported | Avoid (renders black) |
| Corners | As-is | Auto-rounded by iOS |
You need both for a complete setup — see the full size guide.
“Precomposed” icons (legacy)
Older iOS versions supported rel="apple-touch-icon-precomposed" to prevent iOS from adding a gloss effect. Modern iOS ignores the gloss effect entirely, so plain apple-touch-icon is all you need today.