The apple-touch-icon is the image iOS and iPadOS use when a user saves your website to their home screen via Add to Home Screen in Safari. Getting it right is important: the wrong size or a missing file will make your site look unpolished next to native apps.
The correct apple-touch-icon size
The recommended size in 2025 is 180×180 pixels. This covers the iPhone at 3× resolution (60 pt icon at 3x = 180 px). For older or lower-resolution devices, iOS scales down from 180 px automatically — providing a single 180 px image is sufficient.
You may also see references to 152×152 (iPad Retina), 167×167 (iPad Pro), or 120×120 (older iPhone). In practice, providing one 180×180 file and referencing it as:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">…covers every modern iOS device without needing multiple files.
What happens if you don't have one?
When a user taps Add to Home Screen and you have no apple-touch-icon, iOS falls back to:
- A screenshot of the visible area of your page — often blurry and unrecognizable at icon size.
- Or a generic white rectangle with a globe.
Neither is a good look. Native apps always provide a crisp, purposeful icon — your web app should too.
Does Apple apply rounded corners automatically?
Yes. iOS applies the standard squircle (rounded rectangle) mask to your icon on the home screen. You do not need to pre-round the corners in the image. Provide a full-bleed 180×180 square image and iOS will mask it. If you pre-round the corners, you'll end up with double-rounded corners and a gap at the edges.
Format requirements
- PNG only. JPEG is not reliable for apple-touch-icon. Use PNG.
- Solid background recommended. If your image has transparency, iOS may add a white or black background. Use a solid background color to ensure consistent appearance across all iOS versions.
- No gloss effect needed. Older iOS versions added a gloss shine effect automatically. Modern iOS (7 and later) does not — your image is shown as-is.
Where to place the file
Place apple-touch-icon.png in the root directory of your website — the same folder as your index.html or the framework's public directory. Safari will also find it from the root without a <link> tag, but it's best practice to include the tag anyway:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Place this in the <head> of every page — or in your layout template so it appears everywhere.
Testing your apple-touch-icon
- On an iPhone or iPad, navigate to your site in Safari, tap the Share button, then Add to Home Screen. Check the icon preview.
- Use Chrome DevTools → Application → Manifest to check icon references.
- Use browser DevTools → Elements to confirm the
<link>tag is present in<head>.
Create your apple-touch-icon for free
Our favicon generator creates a 180×180 apple-touch-icon.png as part of the complete favicon package. Choose an icon from 250+ options, set your background color and shape, and download everything — favicon.ico, apple-touch-icon, android-chrome PNGs, site.webmanifest, and the HTML snippet — in one ZIP. Free, no account required.