An Apple touch icon is the image iPhones and iPads use when someone adds your website to their Home Screen. Make it one opaque 180 × 180 px PNG and link it with <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Apple’s guide says that a file with that name in the root folder of your site is picked up even without the tag. If you provide no icon at all, iOS 16.4 and later draw a letter instead, taken from the first letter of the site’s name.
This guide covers what the icon is for, the size, the tag, what to do about transparency and rounded corners, how it works with a web app manifest and what to check when it doesn’t show.
What is an Apple touch icon?
An Apple touch icon is the PNG that represents a website on the Home Screen of an iPhone or iPad after someone adds it. Apple’s Safari Web Content Guide, an archived document last updated in 2016, calls these shortcuts Web Clips and describes how to choose their icon. The name comes from the rel="apple-touch-icon" value of the link tag.
The touch icon isn’t your favicon. The favicon is the 16 px image in a browser tab, and the touch icon is a much larger image that sits next to real apps. WebKit’s Safari 26 announcement says that every site added to the Home Screen now opens as a web app by default, so more people see this icon in daily use. Our favicon sizes guide lists every file a site needs.
What size should an Apple touch icon be?
An Apple touch icon should be 180 × 180 px, which is the size for current iPhones. Apple’s guide gives example sizes for different devices, 180 × 180 px for iPhone and 167 × 167 and 152 × 152 px for iPad, and says the system uses the most appropriate icon: if none matches exactly, it uses the smallest icon that is larger than the size it needs, and if all are smaller, the largest one.
That rule means a single 180 px file covers every device, because the system scales it down for the smaller sizes. A file smaller than 180 px, on the other hand, is scaled up and looks soft. You don’t need the dozen sizes some generators produce; our favicon converter writes just the one 180 px file.
What is the Apple touch icon HTML tag?
The Apple touch icon tag is a <link> element with rel="apple-touch-icon" in the <head>:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
The sizes="180x180" attribute is optional when you have one file; our converter writes it anyway. Apple’s guide explains the other options. A file named apple-touch-icon.png in the root folder represents the whole website. A link tag on a single page replaces that icon for the page. If you list no icon in a page, the guide says the system searches the site’s root folder for files that start with apple-touch-icon.
Keep the tag even when the default file name would work, because other tools read the HTML, and because it states your intent. Our guide to making a favicon shows the whole set of tags.
Should an Apple touch icon be transparent or have rounded corners?
An Apple touch icon should be an opaque, square, full-bleed image: don’t round the corners and don’t leave transparent pixels. Apple’s guide doesn’t say how iOS draws transparent pixels or corners in a web shortcut, and we couldn’t test a device, so we follow the rule for app icons. For app icons, Apple’s guidelines say the system applies the rounded mask to a square, and our guide to app icon rounded corners shows what goes wrong when you round them yourself.
The same guide notes that Safari on iOS 7 and later doesn’t add effects to icons. Before iOS 7, Safari added effects to icons, and the -precomposed file name suffix switched them off. In AI Icon Creator’s test, our favicon converter turned a logo with transparent corners into an opaque 180 px PNG with a white background, and it kept the transparency in the small favicon PNGs of the same pack.
If a white background doesn’t suit your brand, choose a solid colour in the converter or add the background in your design tool. Keep the subject away from the edges, in the central 80% (our app icon template pack has a 180 px canvas with that guide), so the corners that iOS cuts never touch it.
What is apple-touch-icon-precomposed?
apple-touch-icon-precomposed is an older variant that told iOS not to add its effects to an icon, and you no longer need it. Apple’s guide says Safari on iOS 7 doesn’t add effects to icons, and that only older versions of Safari skipped the effects for files named with the -precomposed.png suffix. Use apple-touch-icon, with no suffix, in both the file name and the rel value.
How does the Apple touch icon work with a web app manifest?
A web app manifest can supply the Home Screen icon too, but if you provide both, the Apple touch icon wins. WebKit’s post on web apps on iOS and iPadOS says you can list icons in the manifest, supported since iOS and iPadOS 15.4, or list apple-touch-icon tags in the HTML head, and that if you do both the touch icon takes precedence over the manifest-declared icons.
The Safari 26 announcement adds that sites with a manifest keep all of its benefits and that icons defined in it are used. So the practical setup for a web app is both: the 180 px touch icon for iOS and 192 and 512 px PNGs, one of them maskable, in the manifest for Android. Our PWA icon guide covers the manifest side.
Why isn’t my Apple touch icon showing?
Your Apple touch icon usually doesn’t show because the file can’t be found, so iOS falls back to a letter, or because a different icon takes precedence. Check these in order:
- The file loads. Open
https://your-site/apple-touch-icon.pngin a browser. It should show your image, not a 404 page. When iOS finds no icon, WebKit says it draws a monogram from the first letter of the site’s name; before iOS 16.4 it used a screenshot of the site. - The tag is right.
rel="apple-touch-icon", ahrefthat points to the PNG, and the tag inside the<head>of the page people add. - It is a PNG. Apple’s guide specifies PNG for the root file.
- It is big enough. An icon under 180 px is the largest one available, so it is scaled up and looks blurry.
- It is the icon you expect. If a tag and a manifest disagree, the touch icon wins.
- Don’t judge by your logs. In our test, Safari 26.5 on a Mac didn’t request the touch icon when it loaded the page, so a quiet log doesn’t mean the file is broken.
Test on a real iPhone, because we couldn’t: add your site to the Home Screen and look at the icon.
Frequently asked questions
What is the Apple touch icon for?
The Apple touch icon is the icon iOS and iPadOS use for a website’s Home Screen shortcut. It isn’t the favicon in the browser tab. You provide it as one PNG, usually 180 × 180 px, and link it with <link rel="apple-touch-icon"> in the page’s head.
What size should an Apple touch icon be?
An Apple touch icon should be 180 × 180 px. Apple’s guide says the system uses the icon closest to the size it needs, preferring the smallest one that is larger, so one 180 px PNG works on iPhones and iPads. An icon smaller than 180 px is scaled up and looks soft.
Does an Apple touch icon need rounded corners?
An Apple touch icon doesn’t need rounded corners: provide an opaque, square image and don’t draw the corners yourself, because iOS shapes Home Screen icons itself. Apple’s guide says Safari on iOS 7 and later adds no effects to icons. We couldn’t test the result on a device, so check how yours looks after adding it.
Do I still need apple-touch-icon-precomposed?
You don’t need apple-touch-icon-precomposed any more. It stopped older versions of iOS from adding effects to the icon, and Apple’s guide says Safari on iOS 7 and later adds none. Name the file apple-touch-icon.png and use rel="apple-touch-icon".
Can I use my manifest icons instead of an Apple touch icon?
You can use manifest icons for the Home Screen on iOS and iPadOS 15.4 and later, but an Apple touch icon takes precedence if both exist. Most sites keep both: the 180 px touch icon for Apple devices and the 192 and 512 px manifest icons for Android and installed web apps.
Ready to make your icon?