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 a 17.54%-of-canvas-radius rounded mask (the Apple "squircle" — 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 size Apple cares about — and which still matter
The complete 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 there. 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.
Related on iKit
- Generate App Icons for iOS, Android, and Web in 2026 — The full multi-platform icon export walkthrough; the Apple Touch Icon flow above is one branch of that pipeline.
- Android Mipmap Generator: 5 Density Folders, One Click — The Android-side companion: same 1024×1024 source, different density-bucket output for
res/mipmap-*.
Related posts
Android Mipmap Generator: 5 Density Folders, One Click (2026)
Generate every Android mipmap density (mdpi to xxxhdpi) from one source PNG — no Android Studio, no upload, ready as a drop-in res/ folder in seconds.
Crop PDF Online: Trim White Margins (No Upload, 2026)
Trim white margins from any PDF in your browser — no upload, no watermark, no sign-up. Here is exactly how PDF cropping works in 2026.
Merge PDF Free Online — No Sign-Up, No Watermark (2026)
How to merge PDF files for free without uploads, watermarks, or sign-ups — and what's actually happening under the hood when iKit does it in 2026.