What size should an apple-touch-icon be in 2026?

180×180 is the modern default and covers all current iPhones. Add 167 (iPad Pro), 152 (iPad Retina) and 120 (older iPhone) for full legacy coverage.

Where does apple-touch-icon.png go?

At the root of your site (https://yoursite.com/apple-touch-icon.png). iOS Safari probes this URL automatically.

Why is my apple touch icon showing on a black background?

iOS ignores transparency. Pre-flatten the icon onto a solid background (white or brand color) before saving — our generator does this automatically.

Do I need a separate favicon too?

Yes. apple-touch-icon is iOS-only. For browser tabs and Google search, generate a full favicon set as well.

Does the apple touch icon generator upload my logo?

No — it runs entirely in your browser. Your unreleased brand mark never leaves your device.

What about Android Home Screen icons?

Android uses the icons declared in your Web App Manifest (192×192 and 512×512 PNGs). Our Favicon Generator outputs both.

Apple Touch Icon — Complete 2026 Guide (Sizes, Tags, Tips)

When a visitor taps 'Add to Home Screen' on iPhone or iPad, iOS looks for a specific file at your site root called apple-touch-icon.png — and if it can't find one (or finds the wrong size), iOS falls back to a blurry screenshot of your homepage. This guide covers every size you need in 2026, the exact HTML to paste, why iOS treats transparency differently from every other platform, and the easiest way to generate the whole set in under a minute.

What is an apple-touch-icon and why does it matter?

An apple-touch-icon is the icon iOS Safari uses when someone adds your website to their Home Screen, saves it as a Web App, or pins it from the share sheet. Once added, your site lives next to native apps on their phone — and the icon is what they tap.

If you don't ship a proper apple-touch-icon, iOS generates a low-quality screenshot of the top-left of your homepage and uses that. It looks unprofessional, doesn't survive design changes, and makes your site invisible in a sea of polished native app icons.

Apple touch icon sizes you need in 2026

Apple's documentation lists several sizes, but 99% of devices use just one — 180×180. The rest are legacy or iPad-specific.

180×180 — iPhone Retina (iOS 8+). The modern default. If you ship only one file, ship this one.
167×167 — iPad Pro.
152×152 — iPad Retina (iOS 7+).
120×120 — iPhone Retina (iOS 7).

Step-by-step: generate the full apple-touch-icon set

1Open the EazyAITools Apple Touch Icon Generator.
2Upload a square source logo (512×512 or larger works best).
3Pick 'Flatten to white' as the background (recommended — see next section).
4Click 'Generate apple-touch-icons'. You get all four sizes instantly.
5Download the 180×180 file as apple-touch-icon.png and place it at the root of your site (https://yoursite.com/apple-touch-icon.png).
6Copy the provided <link> tags into the <head> of your site.

The HTML you need in <head>

Modern iOS Safari will find /apple-touch-icon.png automatically if you place it at the site root. But explicit <link> tags improve reliability (especially for non-root deployments) and let you ship multiple sizes:

Why iOS strips transparency (and how to fix it)

Unlike favicons, iOS ignores transparency on apple-touch-icons and renders them on a black background. If your logo has a transparent PNG background, it'll show up as a logo floating on black — which usually looks broken.

The fix: pre-flatten your icon onto a solid background (white or your brand color) before saving. Our generator does this automatically when you pick 'Flatten to white' — you get a clean PNG with no transparency that iOS renders perfectly.

Common mistakes that break apple-touch-icon rendering

Shipping a transparent PNG → renders on a black background.
Pre-rounding the corners → iOS rounds them again, giving an awkward double-rounded shape.
Filling the entire canvas edge-to-edge → iOS crops slightly inward; always leave ~10% padding.
Using a non-square source image → iOS stretches it.
Placing the file anywhere other than the root (without a <link> tag) → iOS can't find it.
Forgetting cache-busting after an update → use ?v=2 in the href to force a refresh.

Testing on iPhone / iPad

1Open your site in Safari on iPhone or iPad.
2Tap the Share button (square with up-arrow).
3Scroll down and tap 'Add to Home Screen'.
4The icon preview at the top of the dialog shows exactly what iOS will use. If it looks wrong, fix and redeploy.

Apple touch icon vs favicon — do I need both?

Yes. They serve different platforms:

Favicon (favicon.ico, favicon-32x32.png) → browser tabs, bookmarks, Google search results, Android.

Apple touch icon (apple-touch-icon.png) → iOS Home Screen, iOS Safari pinned tabs, iPadOS dock.

Generate both sets together for a polished, professional setup. Our Favicon Generator handles the browser side; this tool handles the iOS side.

FAQ

What size should an apple-touch-icon be in 2026?: 180×180 is the modern default and covers all current iPhones. Add 167 (iPad Pro), 152 (iPad Retina) and 120 (older iPhone) for full legacy coverage.
Where does apple-touch-icon.png go?: At the root of your site (https://yoursite.com/apple-touch-icon.png). iOS Safari probes this URL automatically.
Why is my apple touch icon showing on a black background?: iOS ignores transparency. Pre-flatten the icon onto a solid background (white or brand color) before saving — our generator does this automatically.
Do I need a separate favicon too?: Yes. apple-touch-icon is iOS-only. For browser tabs and Google search, generate a full favicon set as well.
Does the apple touch icon generator upload my logo?: No — it runs entirely in your browser. Your unreleased brand mark never leaves your device.
What about Android Home Screen icons?: Android uses the icons declared in your Web App Manifest (192×192 and 512×512 PNGs). Our Favicon Generator outputs both.

Apple Touch Icon: Sizes, HTML Tags and Common Mistakes in 2026