Apple Touch Icon 180x180 — iOS Home Screen Favicon
Set up the 180x180 Apple Touch Icon for iPhone and iPad home screens. Learn about corner rounding, visual effects, and the apple-touch-icon link tag.
Detailed Explanation
Apple Touch Icon 180x180
The Apple Touch Icon is the icon displayed when an iPhone or iPad user adds your website to their home screen. At 180x180 pixels, it needs to be visually appealing and instantly recognizable among native app icons.
How Apple Handles the Icon
Apple applies several visual treatments automatically:
- Corner rounding — The square icon is masked with rounded corners matching the iOS icon shape
- No transparency — Transparent areas are filled with black or white depending on the context
- No visual effects — As of iOS 7, Apple no longer applies gloss or shadow effects
Implementation
Add this tag to your HTML <head>:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
File Requirements
- Format: PNG (JPEG is supported but not recommended due to lack of transparency control)
- Size: Exactly 180x180 pixels
- Color space: sRGB
- No rounded corners: Supply a square image — iOS applies the mask automatically
- No transparency recommended: Fill the background with a solid color
Design Considerations
Since the icon appears at a relatively large size on the home screen:
- Your logo or symbol should fill about 60-70% of the icon area
- Leave padding around the edges (Apple recommends about 10% margin)
- Use your brand colors for the background
- Test against both light and dark iOS wallpapers
- Remember the corners will be rounded — keep important content away from corners
Common Mistakes
- Using a transparent background (results in a black background on some iOS versions)
- Placing content too close to the edges (gets clipped by corner rounding)
- Using the same image as the 32x32 favicon without optimization (looks blurry when scaled up)
- Forgetting the
sizes="180x180"attribute (iOS may use the wrong icon)
Use Case
Every website with mobile traffic should include an Apple Touch Icon. This is especially important for web apps and progressive web apps targeting iOS users, e-commerce sites where users may want quick home screen access, and any brand-conscious website where appearance on the iOS home screen matters.