---
title: The apple-touch-icon: A Complete Guide
description: The apple-touch-icon is a 180x180 PNG for the iOS home screen. iOS ignores transparency and composites onto black, so use a solid background. Tag and pitfalls inside.
canonical: https://appicons.drummerduck.com/blog/apple-touch-icon-guide
---

# The apple-touch-icon: A Complete Guide

When someone adds your site to their iPhone home screen, iOS reaches for one tag. Get it wrong and it grabs a blurry screenshot of your page instead.

> **Short answer:** Ship one 180x180 PNG named apple-touch-icon.png with a solid background (iOS ignores transparency and composites onto black), and link it with <link rel="apple-touch-icon" href="/apple-touch-icon.png">. That covers the iOS home screen.

## What the apple-touch-icon is

The apple-touch-icon is the icon iOS uses when a user taps Add to Home Screen. It is separate from your favicon and separate from the web app manifest. It exists because iOS wants a full-quality app-style icon, not the tiny tab favicon scaled up.

One 180x180 PNG is enough. Current iOS scales that single file down for every context it needs, so you do not ship the old ladder of 57, 72, 114, and 152 sizes.

## The link tag

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

<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```

iOS also looks for /apple-touch-icon.png at the site root even with no tag, but declaring it is more reliable across setups.

> **No transparency: iOS fills it with black:** iOS ignores the alpha channel on an apple-touch-icon and composites the image onto a black background. A transparent PNG that looks clean in the browser becomes a mark floating on a black square on the home screen. Export with a solid background colour instead.

## The spec at a glance

| Property | Value |
| --- | --- |
| Dimensions | 180x180 |
| Format | PNG |
| Transparency | Ignored, composited onto black |
| Corners | Square source, iOS rounds them for you |
| Filename | apple-touch-icon.png at the site root |

## Common pitfalls

No apple-touch-icon at all is the worst case. When iOS cannot find one it falls back to a downscaled screenshot of the page, which is blurry and off-brand. A single tag fixes it.

Rounding the corners yourself is a mistake. iOS applies its own rounded-square mask, so a pre-rounded source gets rounded twice and shows a thin border of background around the icon. Give it a square, full-bleed image.

Refreshing is not instant. Once someone has added your site to their home screen, changing the icon on your server does not update their existing shortcut. They have to remove it and add it again to pick up the new icon.

## Frequently asked questions

### What size is an apple-touch-icon?

180x180 pixels, as a PNG. Current iOS scales that one file for every context, so you do not need the older 57, 72, 114, or 152 sizes.

### Why is my apple-touch-icon showing a black background?

iOS ignores transparency on the apple-touch-icon and composites it onto black. Export the PNG with a solid background colour instead of a transparent one.

### Why does iOS show a blurry icon for my site?

You probably have no apple-touch-icon. Without one, iOS uses a downscaled screenshot of the page. Add a 180x180 PNG and the correct link tag.

### Why did my home screen icon not update after I changed it?

Existing home screen shortcuts cache the icon they were created with. The user has to remove the shortcut and add the site again to pick up a new apple-touch-icon.