What is an Apple Touch Icon?
The apple-touch-icon is the image iOS uses when users add your website to their home screen. It appears alongside native app icons, so it needs to look professional and recognizable.
Why does it matter?
- Home screen appearance — Without it, iOS takes a screenshot of your page, which usually looks terrible
- Brand recognition — Your icon appears next to native apps like Instagram and WhatsApp
- Return visits — Users who add your site to their home screen are highly engaged
- PWA support — Essential for Progressive Web App installations on iOS
- Web clips — Used in Safari bookmarks and reading list
How to fix it
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Image specifications
- Size: 180x180 pixels (iOS will downscale for older devices)
- Format: PNG (no transparency — iOS adds its own effects)
- Shape: Square with no rounded corners (iOS applies the rounding automatically)
- No transparency — Use a solid background color
Design tips
- Keep it simple — Works at small sizes like 60x60
- Solid background — Transparent backgrounds show as black on iOS
- No rounded corners — iOS applies its own corner radius
- Match your favicon — Should be recognizable as the same brand
- Test on actual devices — Add your site to the home screen to check
Additional sizes (optional)
<!-- Primary (required) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Optional: specific sizes for different devices -->
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />In practice, providing just the 180x180 version is sufficient — iOS will downscale as needed.