Apple touch icon, the current spec

One PNG at 180 by 180, no transparency, no pre-rounded corners. That is the modern Apple touch icon, and this is how the browser, home screen, and Safari pinned tabs actually use it.

Apple’s icon story used to sprawl across a dozen sizes and two filename variants. It collapsed years ago into a single file, and most legacy docs have not caught up. This guide is the current spec.

The one file

/apple-touch-icon.png — 180×180 pixels, PNG, square, opaque background, no pre-rounded corners.

Linked in your HTML with:

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

That is the entire modern setup.

What iOS does with it

  • Home screen. iPhone and iPad both use the 180×180 PNG as the source, applying Apple’s current corner radius at render time. iPad downsamples for its home screen grid; iPhone uses it close to 1:1 at 3x scaling.
  • Share sheet and Spotlight. iOS downsamples from the same source for smaller contexts.
  • Safari tab / bookmark. Safari uses the apple-touch-icon as the thumbnail for pinned tabs and the Start Page’s favourites grid.
  • iMessage link previews. When someone shares your URL in iMessage, the apple-touch-icon is one of the fallbacks for the rich link preview thumbnail.

Why opaque, not transparent

Transparent corners on a PNG get Apple’s mask applied over them, producing a fuzzy edge on the rounded corner. A fully opaque square gets the clean mask Apple expects. Fill the background with your brand colour or the same colour as the icon’s surroundings.

If your logo is a mark that must sit on a specific background, bake the background into the PNG. Do not rely on transparency.

Filename and location

/apple-touch-icon.png at the root of your domain. iOS blind-requests this path on install, independent of your <link> tags, as a fallback. Shipping it at the root plus linking it in HTML covers both codepaths.

Do not ship /apple-touch-icon-precomposed.png. It is ignored by every iOS version currently in use.

Size variants you can skip

The Apple favicon checklists on older tutorials include every size from 57×57 up to 167×167. Apple consolidated to 180×180 with iOS 7 and again reaffirmed it with every subsequent iOS major. The older sizes are requested by devices that have been out of update support for eight or more years.

If you must support those devices, add a 76×76 PNG for original iPad at non-Retina and stop there. It is rarely worth the extra file.

Quick test

On iOS: open your site in Safari → Share → Add to Home Screen. The icon that appears on the home screen is your apple-touch-icon.png. If it is blurry, your source PNG is too small. If it has weird corners, your source has transparency or pre-rounded corners.

On macOS Safari: bookmark the page and check the bookmark thumbnail. Same source file.

Generating it

Faviconry exports an apple-touch-icon.png at exactly 180×180 with an opaque background you control, from the same SVG source as every other favicon in the set. One file, matched to every other icon on your site.

Framework-specific setup

Where the file goes and how the link tag gets rendered differs per framework:

  • Next.js — apple-icon.png inside /app (note singular icon)
  • Astro — /public/apple-touch-icon.png + link in BaseLayout
  • SvelteKit — /static/apple-touch-icon.png + link in app.html
  • React (Vite / CRA) — /public/apple-touch-icon.png + link in index.html
  • Vue / Nuxt — /public/apple-touch-icon.png + link in app.head

Frequently asked questions

Do I still need apple-touch-icon-precomposed?

No. The precomposed variant was needed for iOS 6 and earlier, when iOS would add gloss and a rounded mask on top of your icon. Every iOS version from 7 onward respects your icon as-is, and Safari no longer looks for precomposed. Ship one apple-touch-icon.png and move on.

Why 180x180 and not 192 or 256?

180 is the internal size Apple currently uses to render the iPhone home screen at 3x scaling. The OS downsamples for smaller contexts (notifications, Spotlight) and upsamples carefully for iPad's larger grid. 180 hits the native rasterisation bucket. 192 or 256 forces a resample every time.

Should the corners be rounded in the source PNG?

No. Ship a square with no pre-rounded corners. iOS applies its own corner radius to every home screen icon at render time. A pre-rounded PNG ends up with doubled corners (your rounding inside Apple's rounding), which looks off on newer devices where the OS corner radius has changed.

Related guides