What size is the apple-touch-icon?

180x180 pixels. A single 180x180 PNG covers every current iPhone and iPad; iOS automatically downscales it for older or smaller devices, so you do not need multiple sizes.

What is the apple-touch-icon link tag?

Add inside your . iOS also falls back to a file named apple-touch-icon.png at the site root even without the tag.

Should the apple-touch-icon be transparent?

No. iOS fills transparent pixels with black, which usually looks wrong. Use a full, opaque background that fills the entire square so your icon looks intentional on the home screen.

Do I need to round the corners of the apple-touch-icon?

No. Supply a square, full-bleed icon with sharp corners. iOS applies its own rounded-corner mask automatically; pre-rounding the corners results in a double-rounded, inset look.

Back to generator

The Apple Touch Icon, Explained

The apple-touch-icon is the icon iOS and iPadOS use when someone adds your site to their home screen. The right size is a single 180x180 PNG, declared with <link rel="apple-touch-icon">, on an opaque background with no pre-rounded corners. This guide covers the size, the tags, and the gotchas that trip people up.

Last updated: 13 June 2026

What the apple-touch-icon is

When someone taps "Add to Home Screen" in Safari, iOS does not use your tiny browser favicon. Instead it looks for a dedicated, higher-resolution icon called the apple-touch-icon. That image becomes the app-style icon on the home screen, in Spotlight search, and in some iOS UI. Get it right and your saved site looks like a real app; get it wrong and you get a shrunken screenshot or a black-bordered square.

The correct size: 180x180

The single recommended size is 180x180 pixels. This is the native resolution for current iPhones, and iOS gracefully downscales it for iPads and older devices. You do not need the long list of Apple sizes from years past (152, 167, 120, and so on) - one crisp 180x180 PNG is enough today. Supply a square image; non-square sources get padded or distorted.

The link tag

Reference it in your page's <head>:

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

iOS will also automatically request a file literally named apple-touch-icon.png from your site root even if you forget the tag, so naming the file correctly and placing it at the root is a reliable safety net. Note that apple-touch-icon is not declared in the web manifest - it lives in the HTML <head> (or as app/apple-icon.png in Next.js, which generates the tag for you).

The two mistakes everyone makes

1. Transparency

iOS fills any transparent pixels with black. A logo exported with a transparent background that looks great in a browser tab can turn into a black box on the home screen. Always give the apple-touch-icon a full, opaque background that fills the entire 180x180 square - a brand color or white works well.

2. Pre-rounded corners

iOS applies its own rounded-corner mask to the icon automatically. If you round the corners yourself, you end up with a doubly-rounded, inset icon that looks smaller and slightly off. Export a full-bleed square with sharp corners and let iOS shape it.

Other things worth knowing

Padding. Leave a little breathing room around your mark inside the square so it is not crammed edge-to-edge after the system mask is applied.
Caching. iOS caches the home-screen icon aggressively. After changing it, remove and re-add the shortcut to see the new icon.
One file is enough. Resist re-adding the legacy apple-touch-icon-precomposed variants; modern iOS does not need them.

Frequently asked questions

What size is the apple-touch-icon?: 180x180 pixels. A single 180x180 PNG covers every current iPhone and iPad; iOS automatically downscales it for older or smaller devices, so you do not need multiple sizes.
What is the apple-touch-icon link tag?: Add <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> inside your <head>. iOS also falls back to a file named apple-touch-icon.png at the site root even without the tag.
Should the apple-touch-icon be transparent?: No. iOS fills transparent pixels with black, which usually looks wrong. Use a full, opaque background that fills the entire square so your icon looks intentional on the home screen.
Do I need to round the corners of the apple-touch-icon?: No. Supply a square, full-bleed icon with sharp corners. iOS applies its own rounded-corner mask automatically; pre-rounding the corners results in a double-rounded, inset look.

Generate a correct apple-touch-icon

Logo2Favicon builds a correct, opaque, full-bleed 180x180 apple-touch-icon for you as part of the complete set - so you never have to remember the transparency and corner rules. Drop your logo into the generator on the homepage and download the whole bundle, processed privately in your browser with nothing uploaded.

Just need the Apple icon on its own? Use the dedicated Apple touch icon converter. For sizing across every platform see the favicon sizes guide, and to wire up your Android and PWA icons read the web app manifest guide.