---
title: Apple Touch Icon: Size, Tag and iOS Behaviour
description: The apple-touch-icon is the PNG iOS uses when a site is added to the Home Screen. The 180x180 size, the link tag, and why transparency turns black.
canonical: https://favicontools.com/glossary/apple-touch-icon
---

# Apple Touch Icon: Size, Tag and iOS Behaviour

An apple touch icon is the image iOS uses when someone adds your site to the Home Screen from Safari. You ship it as a single 180x180 PNG at /apple-touch-icon.png and point at it with a link tag using rel="apple-touch-icon". iOS ignores transparency in that image and composites it onto black, so give it an opaque background, and let iOS apply the rounded corners rather than baking them in.

## What iOS does with it

When a user taps Share and then Add to Home Screen in Safari, iOS needs a launcher icon. It looks for a link tag with rel="apple-touch-icon", and if there is none it requests /apple-touch-icon.png and /apple-touch-icon-precomposed.png from the site root directly. If it finds nothing it falls back to a screenshot of the page, which never looks intentional.

The image you supply is square and full-bleed. iOS applies its own rounded-corner mask when it draws the icon, so a source image with corners already rounded ends up double-rounded with visible artefacts at the edges.

## The tag

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

One tag and one file is the whole modern setup. Serve the same file at /apple-touch-icon.png so the no-tag fallback path also resolves.

## What to ship

| Item | Value |
| --- | --- |
| Dimensions | 180x180 pixels |
| Format | PNG, no alpha needed |
| Path | /apple-touch-icon.png |
| Background | Opaque: transparency is composited on black |
| Corners | Square source; iOS masks the corners itself |
| Safe margin | Keep the mark clear of the outer few percent so the mask does not clip it |

> **Transparency turns black:** iOS does not honour the alpha channel on an apple-touch-icon. A logo exported on a transparent background becomes a dark logo on a black tile, which is usually unreadable. Flatten it onto your brand colour or white before exporting.

## Apple touch icon FAQ

### Do I need all nine legacy apple-touch-icon sizes?

No. Current iOS uses the 180x180 and scales it down for smaller contexts. The 57, 60, 72, 76, 114, 120, 144 and 152 variants only matter for very old iPhones and iPads.

### What is apple-touch-icon-precomposed?

A legacy opt-out. Old iOS added a glossy highlight to home screen icons, and the precomposed variant told it not to. iOS stopped adding the gloss years ago, so the plain rel="apple-touch-icon" is all you need.

### Does Android use the apple-touch-icon?

Chrome on Android will use it as a fallback if your site has no web app manifest icons, but that is not something to rely on. Declare 192x192 and 512x512 PNGs in the manifest for Android and let the apple-touch-icon serve iOS.