Apple Touch Icon (180x180): Design, Safe Areas, and Squircle Masking Rules
Master iOS Apple Touch Icon guidelines. Learn why Apple masks icons with a squircle, how to prevent transparent black backgrounds, and safe-area padding.
iOS automatically clips apple-touch-icon.png using a super-ellipse (squircle) mask and renders transparent regions as solid black. Always export at 180x180 pixels with a solid background fill and keep essential logos inside a 140x140 pixel safe zone (20px padding) to avoid edge clipping.
Solve this problem now with our free Favicon Generator
Try it instantly in your browser — zero tracking, 100% client-side privacy.
Specification & Architecture Reference
| Dimension Spec | Pixel Value | Design Rule |
|---|---|---|
| Total Canvas Resolution | 180 × 180 pixels | Standard for Retina iPhone / iPad touch displays |
| Safe Zone (Inner Box) | 140 × 140 pixels | Keep primary logo and text centered inside this region |
| Corner Masking Radius | Continuous super-ellipse (squircle) | Do NOT round corners manually; iOS rounds them automatically |
| Alpha Channel / Transparency | 0% allowed (Solid fill mandatory) | Transparency renders as harsh black on iOS home screens |
How iOS Safari Treats Web Clips
When a user taps "Add to Home Screen" in iOS Safari, iOS creates a web bookmark styled like a native application icon.
If your website lacks a properly configured `apple-touch-icon`, iOS captures a blurry screenshot of your webpage instead, resulting in an unpolished home screen appearance.
The Two Most Common Mistakes
- **Transparent PNG Backgrounds:**
- **Manually Pre-Rounding Corners:**
Safe Area Padding (The 140px Rule) Because iOS clips the corners and adds a subtle perimeter border effect: - Canvas: **180 × 180 pixels** - Margins: Maintain **20 pixels** of clear background padding on all four edges. - Center Content: Ensure your central glyph or monogram fits comfortably within the inner **140 × 140 pixel** safe square.
<!-- Place in your document <head> -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Generate a properly sized 180x180 Apple Touch Icon with custom padding and solid background colors using Mickytool's **Favicon Generator**.
Solve this problem now with our free Favicon Generator
Execute this workflow immediately without saving data on remote servers.
Frequently Asked Questions
Do I need separate sizes for iPad (152x152) and older iPhones (120x120)?
No. Modern iOS automatically downsamples a single high-resolution 180x180 PNG cleanly across all iPhone, iPad, and iPad Mini screens.
Does the apple-touch-icon-precomposed tag still matter?
No. The '-precomposed' suffix was used in iOS 6 and earlier to disable reflective gloss effects. Modern iOS versions ignore it.