apple-touch-icon explained
When an iPhone or iPad user taps “Add to Home Screen,” iOS looks for your apple-touch-icon. Get this one file right and your site earns a proper app-style icon instead of a blurry screenshot.
The size and tag
Provide a single 180×180 PNG. iOS downscales it for smaller devices, so one file is enough for modern setups:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Design notes
- Use a full-bleed square — iOS applies its own rounded corners, so don't pre-round them.
- Avoid transparency; iOS composites transparent icons on black, which usually looks wrong.
- Keep it simple and high-contrast so it reads at small sizes.
Common gotchas
If iOS shows a screenshot instead of your icon, the file is usually missing, the path is wrong, or it isn't a PNG. Also note the tag must be reachable at the linked URL — some frameworks need the file in a public/ or static/ folder.
Frequently asked questions
What size is an apple-touch-icon?
180×180 pixels is the recommended single size for current iOS devices.
Should apple-touch-icon have rounded corners?
No — supply a square icon; iOS rounds the corners automatically.
Do I need multiple apple-touch-icon sizes?
No longer. A single 180×180 PNG is sufficient for modern iOS.