The correct apple-touch-icon size for iPhone and iPad home screen shortcuts in 2026 is 180x180 pixels, delivered as a square PNG via link rel="apple-touch-icon" in your HTML head. iOS does not use your 32x32 tab favicon when someone saves your site to the home screen. It looks for this dedicated tag and file.
This guide covers the 180x180 requirement, design rules Apple applies automatically, common template mistakes, and how to verify the icon on production without an iPhone guess test.
Quick answer: why 180x180
Apple documents 180x180 px for modern iOS devices. Older guides mention 152x152 (iPad) or 120x120 (legacy iPhone). Shipping 180x180 covers current phones and scales acceptably on tablets.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Place the tag in server-rendered <head>. Safari reads it when the user taps Share > Add to Home Screen.
| Size | Status in 2026 |
|---|---|
| 180x180 | Recommended standard |
| 152x152 | Legacy iPad reference, do not use alone |
| 120x120 | Outdated iPhone size |
| 32x32 favicon | Wrong asset for home screen |
For all favicon dimensions including tab and PWA sizes, see Favicon Sizes Explained.
What iOS does with your apple-touch-icon
When a user adds your site to the home screen, iOS downloads the declared PNG and applies:
- Rounded corners (you do not pre-round)
- Optional gloss removed since iOS 7 (flat icons)
- No transparency padding - treat the canvas as opaque
If the tag is missing, iOS may screenshot the page or use a low-quality scaled favicon. The result looks unprofessional next to native apps.
apple-touch-icon vs favicon
These are separate systems:
rel="icon"- browser tabs, bookmarks on desktoprel="apple-touch-icon"- iOS and iPadOS home screen
You need both. How to Add a Favicon to Your Website shows the full HTML set including apple-touch-icon.
Designing for 180x180
The home screen icon is larger than a tab favicon but still small on the phone grid. Guidelines:
- Square canvas - no wide logo on rectangular artboard
- Solid background - full-bleed color behind the mark
- Simple mark - lettermark or symbol, not full wordmark at tiny scale
- No pre-applied corner radius - iOS masks for you
- Avoid thin lines - stroke weight under 2 px may vanish
Export PNG at exactly 180x180. @2x and @3x naming (apple-touch-icon-180x180.png) is optional if sizes="180x180" is explicit.
Precomposed is obsolete
Old tutorials used rel="apple-touch-icon-precomposed" to disable gloss. iOS 7+ dropped gloss. Use standard apple-touch-icon only.
Multiple apple-touch-icon sizes
You can declare several sizes for older devices:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">In practice a single 180x180 file is enough for most sites in 2026. Add 152x152 only if analytics show significant iPad home screen traffic and you want pixel-perfect legacy support.
Safari picks the closest matching sizes value.
HTML placement and paths
Correct:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Wrong:
<link rel="apple-touch-icon" href="apple-touch-icon.png">Relative paths break on nested routes. Root-relative / paths work everywhere.
Put the file in your static root:
https://example.com/apple-touch-icon.png
Some conventions also accept /apple-touch-icon-precomposed.png at root without a link tag. Explicit HTML is clearer and auditable.
Common apple-touch-icon mistakes
Using the favicon as apple-touch-icon
Pointing both tags at favicon-32x32.png produces a blurry home screen icon. Export dedicated 180x180 art.
Transparent PNG with important content at edges
iOS masks corners. Content near edges gets clipped. Keep the logo centered with padding.
Wrong dimensions in file
A 512x512 PNG with sizes="180x180" works but wastes bandwidth. A 120x120 file with sizes="180x180" looks soft when upscaled.
Client-side only tags
SPAs injecting apple-touch-icon after JavaScript loads may fail for Safari's add-to-home-screen flow. Server-render the tag.
Forgetting iPad Safari pinned tabs
Pinned tabs on iPadOS may use apple-touch-icon or SVG depending on version. 180x180 still helps.
Step-by-step setup
- Export 180x180 PNG from your brand master (512x512 source minimum).
- Upload to site root or
/icons/with stable URL. - Add
link rel="apple-touch-icon" sizes="180x180"to layout<head>. - Deploy and open the PNG URL directly - confirm HTTP 200.
- Run Favicon Check to verify the tag and download the file.
- On iPhone: Safari > Share > Add to Home Screen > confirm preview.
Testing without an iPhone
Desktop Safari cannot fully simulate home screen icons. You can still validate:
- View-source for the tag
- Direct PNG URL returns 200 with correct dimensions
- Favicon Check lists apple-touch-icon with size metadata
- Lighthouse or manual audit of
<head>completeness
For pixel review, download the PNG from Favicon Check and open at 100% zoom. It should look sharp at 180 px square.
Safari Web Apps and iOS 17+
Apple added Add to Home Screen as web apps with more app-like behavior on recent iOS versions. The icon source is still apple-touch-icon for most sites, not the Web App Manifest. Do not assume manifest icons alone fix iOS.
When users install a site as a web app, iOS reads your apple-touch-icon metadata. Missing or wrong size still produces a screenshot fallback. Keep 180x180 PNG updated alongside any PWA work for Android.
Safari tab pinned icons on iPad may also pull from apple-touch-icon on some configurations. One sharp 180x180 asset covers multiple iOS surfaces better than scaling tab favicons.
Test on real hardware when possible: iPhone Safari > Share > Add to Home Screen. Preview thumbnail should match your brand mark, not a cropped page render.
Brand and marketing alignment
Marketing teams often deliver a full horizontal logo. iOS needs a square asset. Plan a dedicated app-icon style mark early:
- Centered symbol on brand color field
- No tagline text below 8 px equivalent
- Same corner padding you would use for a native App Store icon sketch
Store the master in your design system next to OG image templates. Favicon stack and social previews are related but different crops. Cross-link Favicon Sizes Explained in internal docs so designers export all sizes from one session.
After handoff, developers add HTML per How to Add a Favicon to Your Website. QA validates with Favicon Check before campaign launch.
Caching and update delays on iOS
iOS caches home screen icons per shortcut. Changing apple-touch-icon.png on the server does not update existing shortcuts automatically. Users must delete the old shortcut and add again.
Safari may also cache the icon fetch when first adding to home screen. Use cache busting on the filename during major rebrands: apple-touch-icon.v2.png with updated href in HTML.
Communicate to support teams that "icon not updating on iPhone" is often cache, not a broken deploy. Verify server file first with Favicon Check, then instruct users to re-add the shortcut.
Multiple apple-touch-icon entries in the wild
Some CMS themes emit several apple-touch-icon links with different sizes left over from 2014 templates. Safari picks one. Audit your head and remove duplicates pointing at outdated 120x120 assets.
WordPress users: check theme header.php and SEO plugins. Only one authoritative 180x180 link should remain unless you intentionally support legacy iPad sizes documented in Favicon Sizes Explained.
After cleanup, rescan with Favicon Check to confirm a single sharp 180x180 fetch. Remove dead links to deprecated precomposed tags while you are in the head markup.
Relationship to PWA and Android icons
iOS does not read Web App Manifest icons for the classic home screen bookmark flow the way Android does. You still want manifest icons for cross-platform PWAs:
- 180x180 apple-touch-icon - iOS home screen (this article)
- 192x192 / 512x512 - Android manifest (PWA Icon Sizes)
Cover both platforms in the same deploy. Favicon Check scans HTML and manifest in one pass.
FAQ
What size should apple-touch-icon be?
180x180 pixels PNG for modern iOS. Square aspect ratio required.
Can I use SVG for apple-touch-icon?
Safari does not support SVG for apple-touch-icon. Use PNG.
Does apple-touch-icon need a sizes attribute?
Recommended. sizes="180x180" helps Safari select the correct file when multiple icons exist.
What happens if apple-touch-icon is missing?
iOS may use a scaled favicon or page screenshot. The home screen icon looks generic or blurry.
Should I add padding for the rounded corners?
Yes. Keep important content inside roughly 80% center circle. Do not draw your own rounded corners.
Is apple-touch-icon used on macOS Safari?
macOS Safari tabs use standard favicons. apple-touch-icon primarily affects iOS home screen and some iPad contexts.
Can one PNG serve as both favicon and apple-touch-icon?
Technically you can point tags at the same large file. Better practice: separate 32x32 tab and 180x180 home screen exports for sharpness.
How do I verify apple-touch-icon on my live site?
Use Favicon Check. Enter your URL and confirm the 180x180 entry appears with a successful fetch.
Bottom line
iOS home screen icons require a 180x180 PNG and link rel="apple-touch-icon" in server-rendered HTML. Design on a square opaque canvas, use root-relative paths, and validate with Favicon Check before asking users to bookmark your app. Tab favicons and apple-touch-icons are related but not interchangeable.
