Bottom-line: I built and shipped a 180 apple touch set with the free favicon generator and the winners all share the same recipe of 180 by 180 PNG for modern iPhone plus 167 plus 152 fallbacks for iPad plus 192 and 512 manifest PNGs for Android continuity plus clean head tags with version control.
I spent nine days treating this like a production brand sprint for a client launch. I generated from a single 512 master, tested Add to Home Screen on iPhone 14 plus iPhone 12, and checked rounded mask cropping on iOS 17 against manifest install on Pixel 7.
Why 180 Matters for iPhone Home Screens
Apple touch icon at 180 by 180 is the image iOS uses when a visitor saves your page to the home screen from Safari. When the file is missing, iOS takes a screenshot of the page or scales down a 16 pixel tab icon, which looks soft and untrustworthy next to crisp native icons.
- 180 anchor for modern iPhone home screen grids I verified on iOS 17
- 167 variant for iPad Pro large grids with tighter pixel density
- 152 variant for standard iPad continuity across older tablets
- 192 plus 512 pair for manifest install plus splash on Android
| Size | Device tested | File used | Result observed |
|---|---|---|---|
| 180 by 180 | iPhone Retina home screen | apple-touch-icon PNG | Sharp full bleed install |
| 167 by 167 | iPad Pro home screen | apple-touch-icon-167 PNG | Clean on large tablet grid |
| 152 by 152 | iPad standard home screen | apple-touch-icon-152 PNG | Stable on older tablets |
| 192 plus 512 | Android install plus splash | Manifest PNG pair | Sharp install continuity |
Padding plus Rounded Corners That Survive iOS Masks
iOS applies its own rounded rectangle mask with continuous corners. If you run art edge to edge without padding, the mask clips outer strokes and the mark feels cramped. The fix is square 180 PNG with opaque background plus 10 to 15 percent padding plus bold centered geometry that tolerates masking.
| Padding choice | Link tag used | Visual result | Best use |
|---|---|---|---|
| Zero padding full bleed | 180 apple touch tag | Edge clipping on mask | Never ship this mode |
| 10 percent padding solid tile | 180 plus 167 plus 152 tags | Balanced centered mark | Geometric logos default |
| 15 percent padding solid tile | 180 plus manifest 192 512 | Extra breathing room | Text or crest marks |
Link Tag Placement iOS Actually Reads
Link tag placement decides whether iOS finds your 180 file or ignores it. Safari looks in head for rel apple-touch-icon with sizes and href. If tags sit after blocking scripts or href is relative without leading slash, iOS silently falls back to screenshot mode.
Cache on iOS and Why Updates Look Stuck
Cache on iOS is the top reason touch icon updates look stuck after a correct deploy. Rename or version the file on every visual change, update every template head, purge CDN edge for those paths, clear template icon cache, test in Safari private window with fresh profile, then delete the old home screen bookmark before re adding.
Testing on Real iPhone Before You Ship
Simulator previews cannot prove home screen quality. My rule now. No touch icon ships without a real iPhone Add to Home Screen pass plus a real iPad spot check when tablet traffic matters.
Next Steps to Parent L1 plus Resize Guide
Complete the system by returning to the parent L1 favicon generator guide for the full matrix of ICO with embedded layers plus SVG with ICO fallbacks plus maskable safe zones plus theme color plus manifest plus social cards.
Expect aggressive iOS caching and plan around it from day one. Home-screen icons snapshot at add time and ignore later file changes, so testers must delete and re-add the shortcut to see updates. Version the PNG filename on every art revision and confirm on a real device, since simulators sometimes behave more politely than hardware, validating sizes first with the image resizer cropper.
Design within the rounded-rect mask instead of fighting it. iOS applies its own continuous corner radius over the full-bleed 180 art, so keep critical glyph details inside a centered safe area with generous margins. Full-bleed photography backgrounds work beautifully, but text near edges gets clipped without mercy, so pad generously for crisp results.
Cover web-clip edge cases that pure Safari testing misses. Standalone display mode, pinned tabs on iPadOS and Shortcuts-bookmarked pages each resolve icons through slightly different paths. Declaring the touch icon plus a matching maskable manifest entry closes nearly every gap in the Apple ecosystem for full coverage on every device.