How iOS scales the Apple Touch icon

January 11, 2016 10 min read

First published on 11 January 2016 and revised since. The original post made three points: iOS fills any transparent region with black, rounds the corners with its own mask, and scales the icon to the size the device needs. All three still hold. What has changed around them is the clutter: the long lists of per-device sizes and the glossy “precomposed” icon of the early iPhone era are gone, and one 180×180 file now does the whole job. This version keeps the 2016 advice and puts it in today’s terms.

When a visitor taps Add to Home Screen in Safari, the icon that lands next to their apps is rarely shown at exactly the size of the file you shipped — and it is never shown quite as you shipped it. iOS has processed it first: composited it, masked it and scaled it. So the practical question behind the original post is unchanged: if iOS is going to transform your icon anyway, what should you supply so the result still looks like your logo?

What iOS does to the icon, step by step

It fetches the touch icon, not your tab favicon. When the shortcut is created, Safari looks for <link rel="apple-touch-icon"> in the page; if nothing is declared, it falls back to requesting /apple-touch-icon.png at the site root by convention. Your SVG favicon, your ICO and your web app manifest icons are not substitutes here — this is a separate file with a separate job. (WebKit says Safari 26 can use SVG icons in more places, including for web apps on the Home Screen, but iOS 18 and earlier need the PNG and Apple’s documented route is still the touch icon.)
It composites the image onto an opaque tile. A home-screen icon has no transparent pixels. Any transparency in your PNG is filled — in practice, with black — so a logo exported on a transparent background can come back as that logo on a black square, whether you chose black or not.
It applies its own corner mask. iOS rounds the corners with a continuous-curve mask that matches the other icons on the screen. You do not supply the rounding, and you should not draw it yourself: a pre-rounded icon inside transparent corners fights the system mask and ends up looking small and misaligned.
It scales the result to the icon slot. The masked tile is rendered at the size the device’s home screen uses, which is where the 180×180 number comes from — explained next.

Three different operations are happening here, and confusing them causes most bad home-screen icons. Compositing decides what sits behind your artwork. Masking decides which of your pixels survive at the edges. Scaling decides how sharp the survivors look. A beautiful logo can fail on any one of the three while passing the other two.

Why the slot is still 180 pixels

iOS lays its interface out in points, a logical unit, and renders each point with a whole number of physical pixels — the scale factor. Home-screen icons are laid out at 60 points on iPhone, and the highest scale factor iOS uses for them is 3×:

60 pt × 3 = 180 px

Device family	Icon layout size	Scale factor	Native pixels
iPhone	60 pt	3×	180×180
iPad (standard)	76 pt	2×	152×152
iPad Pro (large)	83.5 pt	2×	167×167

That table is why a single 180×180 PNG covers the range: it is pixel-perfect on iPhone and scaled down slightly on iPad, which is the harmless direction. Screens have grown since 2016, but they have grown in points and in physical size, not by raising this scale factor — which is why the size advice in the original post never needed revising. We work through the same arithmetic from the other direction in Is the Apple touch icon still 180×180 in 2026?

Scaling down is kind; scaling up is not

Scaling a larger image down gives the renderer real detail to average, so the result stays clean. Scaling a smaller image up has to invent pixels that were never in the source, which reads as blur. Applied to the touch icon, that means:

Shipping exactly 180×180 is enough. iOS never displays more home-screen pixels than that on iPhone, and the small downscales to 167 or 152 on iPad are visually indistinguishable from purpose-made files.
Shipping larger does not help. Declare a 512×512 PNG and iOS will accept it and scale it down — no sharper result, just a heavier download and one more file to forget at the next redesign.
Shipping smaller is the direction that hurts. A 120×120 or 152×152 icon inherited from an old template must be scaled up on a modern iPhone. If your home-screen icon looks soft while your tab icon looks crisp, an undersized touch icon is a prime suspect.
Downscaling still destroys fine detail. Even a technically perfect 180-to-152 reduction merges hairline strokes, fills small counters and turns short words into texture. Size buys the renderer good material; the design still has to survive being small. Prefer the symbol, monogram or initial over a full logo lockup with a tagline.

Generate the 180×180 file from a source that is genuinely at least that large — ideally your vector original or a master of 512×512 or more. A small logo enlarged to 180 before export is still a small logo, and no scaling afterwards restores detail it never had.

The mask and the black background, revisited

These were the two warnings in the 2016 post, and they remain the two most common ways a touch icon goes wrong.

Transparency becomes black

There is no setting that asks iOS for a white or brand-coloured backdrop; the background has to be in the file. Flatten the exported PNG onto the background you actually want — white, black or a brand colour, filling the whole square, edges included. Flattening also removes the subtle version of the problem: a mostly opaque image whose anti-aliased edges carry an alpha channel can still pick up a dark fringe when iOS composites and scales it.

The corners belong to iOS

Submit the full square and let the system mask do the rounding. Full-bleed applies to the background, not to the artwork: keep letters, faces and other essential detail centred, with clear breathing room on every side and especially near the corners the curve cuts through. If your mark touches the edges of the source file, it will look cramped or clipped on the home screen no matter how clean the scaling is. Judge it masked and at home-screen size, beside real app icons — not as a large square on a monitor.

Two period details from the original era are worth retiring explicitly. The gloss or shine that very old iOS versions added automatically disappeared with the flat redesign of iOS 7, and the separate apple-touch-icon-precomposed file that opted out of it went with it; modern iOS adds no gloss, and you need no precomposed variant. And unlike an SVG favicon, the touch icon has no dark-mode variant mechanism — there is one fixed picture, so choose colours and contrast that hold up on any wallpaper and under the system’s home-screen treatments.

A short history of the size list

Older readers will remember declaring half a dozen touch icons, and at the time they were right to: 57×57 for the original iPhone, 72 and 114 as iPads and Retina displays arrived, then 120, 144, 152 and 167 through the iPhone 6 era. Each entry matched hardware people actually owned. Two things ended the list: iOS became good at scaling one generously sized icon down to whatever a device needs, and the top of the range stopped moving once the iPhone slot settled at 60 points at 3×. Keeping the old sizes today is not harmful — Safari simply never requests most of them — but every extra file is another export that can drift out of sync when the brand changes. For a new site, generate one good 180×180 icon and stop there.

What to ship in 2026

One PNG, exactly 180×180, fully opaque, normally named apple-touch-icon.png and placed at the site root.
A full-bleed background you chose, baked into the file, with the artwork centred and kept clear of the edges and corners. Do not pre-round, and do not leave transparency.
One line of HTML in the shared <head> template, so every page declares it, not only the home page:

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

That icon sits alongside, not instead of, the rest of the package: an SVG and a 96×96 PNG for browser tabs and search results, an ICO at the root for the corners HTML cannot reach, and 192×192 and 512×512 manifest icons for Android. The favicon sizes and formats cheat sheet shows how the pieces divide the work, and the Apple touch icon guide covers the wider setup, including the shortcut name shown under the icon.

Rather than resizing and flattening by hand, you can generate the touch icon as part of that package: EasyFaviconGenerator produces the opaque 180×180 icon from one image, its editor can add a plain background and margins around your mark, and the iOS preview shows the masked result before you download — all in your browser, so an unreleased logo never leaves your machine.

Testing the icon iOS actually made

Open the file directly. /apple-touch-icon.png should return the current 180×180 PNG with a 200 status — not a 404, a login page, or last year’s artwork from a CDN cache.
Check the deployed site. The favicon checker fetches your live page, confirms the touch icon is declared and reachable, and previews it as iOS presents it.
Add it to a real home screen. In Safari on an iPhone or iPad, tap Share, then Add to Home Screen, and judge the result where it will live: opaque background, clean corners, recognisable at arm’s length among native apps. Check iPad as well as iPhone if your audience uses both.
Re-add after a redesign. iOS caches touch icons persistently, so an unchanged shortcut may be showing the previous asset. Remove the shortcut, confirm the direct URL serves the new file, and add it again; if the old icon still refuses to move, deploy under a new filename and update the link.

Quick answers

Should I declare several touch icon sizes, one per device?

No. That list belongs to the hardware of a decade ago. One 180×180 icon is native on iPhone and scales down cleanly on iPad, and one file cannot drift out of sync with itself at a redesign.

Why did my icon get a black background?

Because the PNG contains transparency and iOS composited it onto black. Re-export at 180×180 with an explicit background filling the entire square, then remove and re-add the home-screen shortcut.

Why are the corners of my logo clipped?

That is the mask, not the scaling. The background should run to the edges, but the artwork must not: shrink the mark toward the centre and give it a margin, then preview it masked.

Can I use my SVG favicon or my 512×512 manifest icon instead?

Not as a substitute. Safari expects a PNG for this job, and the manifest icons are designed around Android’s masking rules. Share the artwork across the set, but export the touch icon for the iOS mask and slot.

My new icon will not replace the old one. Is the file wrong?

Probably caching, not the file. Verify the live URL serves the new image, remove the existing shortcut, and add it again before redesigning anything.

The 2016 post, in today’s terms

Strip away a decade of retired sizes and gloss effects and the original advice survives almost word for word: iOS will composite, mask and scale whatever you give it, so hand it one opaque, full-bleed 180×180 PNG with the artwork kept clear of the corners. What the years since have added is mostly subtraction — one size instead of seven, no precomposed variant, no gloss to opt out of. Ship that one file, declare it on every page, and test it on a real home screen, and the icon iOS scales down will still look like yours.