Apple Touch Icon Generator: Sizes, Specs & Setup (2026)
Apple touch icon generator that builds every iOS, iPadOS, and Safari pinned-tab size from one source — no upload, no sign-up, on-brand in 30 seconds.
Apple Touch Icon Generator: Sizes, Specs & Setup
When someone taps Add to Home Screen on your site in iOS Safari, the icon iOS pins to their home screen comes from one hint in your <head> — apple-touch-icon. Get the size, color profile, or padding wrong and iOS quietly falls back to a blurry page screenshot. iKit's Apple touch icon generator emits every Apple-required PNG plus the matching <link> markup from one source, in the browser, in about 30 seconds.
TL;DR
- Apple Touch Icon = home-screen icon for iOS Safari "Add to Home Screen."
- Modern devices need 180×180 PNG; iPad and older iPhones want 167, 152, 120.
- iOS 7+ no longer adds gloss — submit your icon as-is, no
-precomposed. - The browser-only generator outputs every PNG plus ready-to-paste HTML.
- Keep at least 10% padding, sRGB, no transparency for predictable rendering.
What an Apple Touch Icon actually is
From -precomposed to flat icons
The <link rel="apple-touch-icon"> declaration first shipped with iPhone OS 1.1.3 in 2008. iOS used to apply a glossy "shine" overlay and rounded corners on top of any icon you submitted, which is why designers shipped a separate apple-touch-icon-precomposed.png to opt out of the shine. Since iOS 7 (2013) the gloss is gone but the rounded corners stayed, applied via a squircle mask at render time. Today the precomposed variant is identical to the regular one — you only need one PNG per size.
What iOS does with the icon
When the user taps "Add to Home Screen", iOS Safari fetches your apple-touch-icon link, applies the Apple squircle mask (a quintic-superellipse rounded shape — see Apple's Human Interface Guidelines), then renders the result at the device's launcher density. Get the source sharp and centered with reasonable padding and you get a crisp home-screen tile that's visually indistinguishable from a native app icon. Get it wrong — transparent background, edge-to-edge logo, an oddly small dimension — and iOS renders something muddied behind the mask, or skips your icon entirely.
Where iOS looks for it
iOS Safari resolves the icon in this order:
- The first
<link rel="apple-touch-icon">whosesizesattribute matches the device's required size - The most-precise
<link rel="apple-touch-icon">if no exact match exists /apple-touch-icon.pngat the root of your domain/apple-touch-icon-precomposed.pngat the root- Falls back to a screenshot of the visible page area
You should always ship the 180×180 PNG at the root of your domain because iOS still checks /apple-touch-icon.png even when no <link> hint is declared, and a missing root file is the single most common cause of the "iOS is showing a screenshot" bug we see in the wild.
Every apple-touch-icon size Apple cares about — and which still matter
The complete apple touch icon size table
| Size (px) | Devices | Still needed in 2026? |
|---|---|---|
| 57×57 | iPhone 4, original iPad | No |
| 60×60 | Spotlight on older iPhones | Optional |
| 72×72 | iPad pre-Retina | No |
| 76×76 | iPad Retina (iOS 7-12) | Optional |
| 114×114 | iPhone 4 Retina | No |
| 120×120 | iPhone 5 / 6 (non-Plus) | Yes |
| 152×152 | iPad Air, iPad mini | Yes |
| 167×167 | iPad Pro | Yes |
| 180×180 | iPhone 6 Plus and newer | Yes — must-have |
Why the 180×180 is non-negotiable
Most current iPhones report a launcher density that consumes the 180×180 PNG verbatim. If you ship one Apple Touch Icon size, ship that one — iOS will downsample for older non-Plus iPhones with acceptable quality. Including the 152, 167, and 120 variants costs you a few extra kilobytes total, in exchange for avoiding a downsample on iPad and on the iPhone SE / 8 family. iKit's generator emits all four by default for that reason.
Safari pinned-tab icon — a different beast
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4F46E5"> is not an Apple Touch Icon. It's a single-color SVG used by macOS Safari for pinned tabs and by iOS Safari in the share sheet. The source must be a black-only SVG using currentColor rather than fixed fills, and it must have no transparency in its alpha layer — Safari treats every non-transparent path as ink. iKit emits this as part of the same export, but treat it as a separate file with its own constraints.
Building one source PNG that survives every size
Resolution and color profile
Submit a single 1024×1024 source PNG, sRGB color profile, no transparency, with at least 10% inner padding. Apple already requires App Store apps to ship a 1024×1024 master, so using the same source for the web touch icon means your home-screen tile matches your App Store icon for free. That parity matters more than it sounds — Google's brand-knowledge graph ingests both into the same entity, and a visual mismatch between the two slightly weakens that linkage.
Why no transparency
iOS does not composite the icon onto a launcher background. Any transparent pixel becomes black at render time, and the squircle mask then reveals black corners at the icon's curve — exactly the look you don't want. Always flatten onto an opaque color before exporting the PNG. If your logo file has even partial transparency at the edges (anti-aliased outline pixels with alpha < 1.0), the squircle's border will pick up a faint black halo. iKit's generator detects sub-1.0 alpha pixels and warns you before exporting.
The padding rule
iOS applies the squircle mask, then most launcher animations briefly enlarge the icon by ~10% — the spring on tap-and-drop, the open-app zoom, and the wiggle on edit mode. If your logo touches the icon's edge, those edges get cropped or wrapped behind the squircle's curve during animation. The safe rule: leave at least 80 px of clear padding inside a 1024×1024 frame, more if the logo has tight bottom counters that visually optical-illusion towards the edge.
Setting it up: HTML, file paths, manifest
The minimum viable <head> block
<link rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png">
<link rel="apple-touch-icon"
sizes="167x167"
href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon"
sizes="152x152"
href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon"
sizes="120x120"
href="/apple-touch-icon-120x120.png">
Place the 180×180 file at /apple-touch-icon.png so iOS finds it at the legacy default location too — it's a free safety net. The other sizes can live anywhere in your public/ tree as long as the href resolves.
Web App Manifest integration
If you ship a manifest.json (PWA), include the same icons in the Web App Manifest icons array. iOS reads both the <link> tags and the manifest, and falls back gracefully when one source is missing:
{
"icons": [
{
"src": "/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png"
},
{
"src": "/icon-167.png",
"sizes": "167x167",
"type": "image/png"
}
]
}
Why you should drop apple-touch-icon-precomposed
It does the same thing as apple-touch-icon on iOS 7+, and that's been the dominant family since 2014. Strip the precomposed copy from your build pipeline. Mostly it's leftover bytes nobody reads anymore, and a dangling <link> tag in your <head> that pretends to do something useful and doesn't.
Common rendering failures (and how to debug)
"iOS is showing a screenshot, not my icon"
Most common causes, in order of frequency:
- The PNG returns 404 — check Safari Web Inspector → Network with the device tethered to your Mac.
- The
<link>tag is in<body>instead of<head>(shadow-DOM frameworks sometimes do this). - The site is HTTPS and the icon host is HTTP — the icon load is blocked as mixed content.
- A service worker is intercepting the icon request and returning an empty response. Check Application → Service Workers.
"The icon looks blurry on iPhone 14"
If you're shipping only the 120×120, iOS upscales it to 180. Always include the 180×180 — it's cheap, ~25 KB compressed PNG, and avoids the upscale that bites every modern iPhone. If you've already added the 180 and it still looks blurry, check that your source isn't itself a 180-and-upscaled file dressed up as a 1024 — generators that upsample bilinearly leave no Nyquist headroom for the squircle mask.
"Black corners after I added the icon"
Your source has transparency. Open the PNG in Preview or any image tool — if the background is checker-pattern, flatten it to white or your brand color before re-running the generator. Worth verifying the SHA of the file you actually uploaded against the one in your design tree using iKit's hash generator; we've seen builds where a CDN-cached older transparent version was the actual source of "black corners on Wednesday but not Friday."
"The icon won't update — iOS keeps caching the old one"
iOS caches Apple Touch Icons aggressively, sometimes for weeks. The reliable workarounds: add a query string when you re-export (apple-touch-icon.png?v=2026-05), bump your manifest's start_url query, or — for users with the icon already on their home screen — instruct them to long-press the tile, Remove, then re-add the page from the share sheet.
Generating every size in one click
Drop in a 1024×1024 PNG
Open appicon.ikit.app and select Apple Touch Icon. Drop your source PNG. The tool runs entirely in WebAssembly — same architecture as iKit's image compressor, with zero upload to a server. You can verify in DevTools → Network: only static asset loads on first visit, then no outbound traffic during the export.
What ships in the ZIP
You get one ZIP archive containing every Apple-required output:
apple-touch-icon.png— the 180×180 root fileapple-touch-icon-180x180.png— explicit-named 180 copyapple-touch-icon-167x167.png— iPad Proapple-touch-icon-152x152.png— iPad Air / miniapple-touch-icon-120x120.png— iPhone non-Plussafari-pinned-tab.svg— single-color macOS pinned-tab maskindex.html— copy the<link>tags into your real<head>
Drop the PNGs into public/ and paste the <link> block. Done.
Hashing the source for team workflows
If multiple designers re-export the icon, hash the source so everyone agrees on the file that went in. iKit's hash generator gives SHA-256 in the browser. Paste that hash in the icon's commit message and you've got a reproducible lineage every time the icon is regenerated.
Apple Touch Icon vs Favicon vs App Icon
Three icons, three purposes
| Icon type | Where it shows | Required size |
|---|---|---|
| Apple Touch Icon | iOS home screen tile | 180×180 PNG |
| Favicon | Browser tab, bookmark bar | 32×32 ICO/PNG |
| iOS App Store icon | Native app on store + device | 1024×1024 PNG |
A modern site usually wants all three. iKit's generator emits the favicon set (favicon.ico plus 16 and 32 PNGs) alongside the Apple Touch Icon set, which means a single drop produces a complete icon kit ready to deploy.
Why one source serves all three
A 1024×1024 source has more than enough pixel data to downsample crisply to 16×16 favicon — the lossy step is filtering, not data. The reverse — taking a 32×32 favicon and upsampling to 1024 — produces visible jaggies that no smoothing algorithm can hide. Always start from the largest source you have. If your only artwork is small (a 256×256 logo, say), redraw the icon as vector first, then export at 1024 from the vector.
References
- App icons | Apple Developer Documentation — Apple HIG, source for the 1024×1024 master and no-transparency / no-pre-rounded rules.
- Configuring Web Applications | Safari Web Content Guide — Apple's reference for the
apple-touch-iconlink, sizes, and precomposed behaviour. - Squircle - Wikipedia — Confirms Apple uses a quintic-superellipse approximation for iOS app icon corners.
- Web Application Manifest — W3C spec for the manifest
iconsarray referenced in the PWA integration section.
Related on iKit
- Generate App Icons for iOS, Android & Web — The full multi-platform icon export walkthrough; the Apple Touch Icon flow above is one branch of that pipeline.
- iOS App Icon 1024×1024 Generator — The native-app counterpart: the same 1024×1024 master that feeds App Store Connect also feeds your Apple Touch Icon.
- Mipmap Generator for Android: 5 Density Folders — The Android-side companion: same 1024×1024 source, different density-bucket output for
res/mipmap-*. - Appicon.co Alternative: iKit App Icon Generator — How iKit's browser-only generator compares to appicon.co on privacy and output coverage.
Related posts
How to Find a Single Typo in a 5,000-Line File (2026)
Find a single typo in a large file fast: use a word- and character-level diff to pinpoint the one changed character instead of scanning 5,000 lines.
Compare Two Markdown Drafts Without Word Track Changes (2026)
How to compare two Markdown drafts without Word's Track Changes: use a diff checker, git word-diff, or CriticMarkup to see every real edit in plain text.
How to Compare Two JSON Files Without False Diffs (2026)
Learn how to compare two JSON files without key-order and whitespace noise. Normalize first, sort keys with jq, and diff only the changes that matter.