apple-touch-icon 180x180: Copy-Paste HTML + Add-to-Home-Screen Fix (2026)

apple-touch-icon is the 180x180 PNG iOS shows when a user picks "Add to Home Screen" in Safari. Apple's official Safari Web Content Guide gives you the spec; this guide gives you the copy-paste HTML, the 5 mistakes that make icons render broken, and the PWA / splash-screen setup iOS actually respects in 2026.

What is apple-touch-icon?

Introduced in iOS 1 (2007) for the original iPhone, Apple Touch Icon is a special PNG image that iOS uses when:

• A user adds your site to the home screen ("Add to Home Screen")
• iOS Safari shows your site in the start page
• iOS shares your site to AirDrop / Mail
• macOS Safari Reader shows your site favicon

Without an apple-touch-icon, iOS falls back to a screenshot of your homepage — which usually looks awful.

The current correct size

One size: 180x180 pixels, PNG, no transparency, no rounded corners (iOS adds them).

The historical sizes (57x57, 72x72, 76x76, 114x114, 120x120, 144x144, 152x152) covered iPhone 3GS through iPad Air 2. As of iOS 14+, only the 180x180 image is used. Older sizes are downsampled by iOS automatically.

The HTML

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Place at the root URL. iOS will look for /apple-touch-icon.png by default even if you don't declare the link tag — but always declare it for clarity.

Design rules

1. No transparency. iOS does not honour alpha channels reliably. Use a solid background.
2. No rounded corners. iOS rounds them for you. If you pre-round, the corners look double-rounded.
3. Safe zone: keep critical content within a 144x144 centre square. iOS may apply a slight zoom effect.
4. Avoid text-only icons. Single letters or short logos work better than text.
5. Match your brand color. The icon sits on a user's home screen alongside dozens of other apps — your brand color is the differentiator.

Apple Touch Icon vs PWA manifest icons

Common confusion: do I need both?

• apple-touch-icon — for iOS Safari "Add to Home Screen" and Reader Mode
• manifest icons (192x192, 512x512) — for Android PWA install and modern Chromium browsers

Yes, you need both. iOS does not yet read the web manifest fully (as of iOS 18 / 19 the support is partial). Always include apple-touch-icon explicitly.

iOS Splash Screens (the deeper rabbit hole)

For full PWA experience on iOS, you also need a splash screen — the static image shown while your PWA loads. iOS requires a separate image for each device size:

<link rel="apple-touch-startup-image"
   media="screen and (device-width: 430px)..."
   href="/splash-iphone-15-pro-max.png">

iPhone 16 Pro Max needs 1320x2868. iPhone SE needs 750x1334. iPad Pro 13" needs 2064x2752. There are 20+ different splash sizes — generators help here.

Status bar styling

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Your App">

Status bar styles: default (white text on dark), black (black bar with white text), black-translucent (your content extends under the bar). For modern designs, use black-translucent and add safe-area-insets in CSS.

Common mistakes

1. JPEG instead of PNG. iOS only accepts PNG.
2. Missing apple-mobile-web-app-title. iOS uses your <title> tag, often truncated.
3. Transparent background. Renders as black on iOS — looks broken.
4. Pre-rounded corners. Stacks with iOS rounding.
5. Wrong path. Must be at site root or absolute URL, not relative.

Testing on iOS

1. Open your site in Safari on iPhone/iPad
2. Tap the Share button
3. Tap "Add to Home Screen"
4. Verify the icon and title preview
5. Confirm — check the home screen

Repeat after updating the icon. iOS aggressively caches; clear Safari cache or use a different domain to bust.

The 30-second solution

Generating apple-touch-icon, manifest icons, and the HTML snippet by hand is tedious. og.hjlabs.in's favicon generator outputs the 180x180 Apple Touch Icon, the manifest, and the <link> tags in one ZIP — drop into your site and ship.

Updated for 2026: also ship the un-prefixed meta tag

One thing changed since this guide was first published. The apple-mobile-web-app-capable meta tag has a standardised, vendor-neutral twin — mobile-web-app-capable — and Chromium logs a deprecation warning if you ship only the Apple-prefixed one. Modern Safari honours the standard name too, so the safe 2026 pattern is to emit both rather than replacing one with the other:

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

The icon story itself has not moved: 180x180 is still the only apple-touch-icon size iOS actually reads, and iOS still caches home-screen icons hard enough that a re-add is the only reliable way to see a change.

Bottom line

Ship a 180x180 PNG. Add the <link rel="apple-touch-icon"> tag. Add the apple-mobile-web-app-title meta. That's 95% of the value. Splash screens and status bar styling are optional polish for when you have actual PWA users.