An Apple touch icon is the image an iPhone or iPad shows when someone adds your website to their home screen, and it’s also used in some bookmarks and share sheets. You need one 180 × 180 px PNG, linked in your page’s HTML. Without it, iOS uses a screenshot of the page or a generic letter, which looks unprofessional.
The essentials
| Item | Value |
|---|---|
| Size | 180 × 180 px |
| Format | PNG |
| Background | Solid, not transparent |
| Corners | Square; iOS rounds them for you |
| File name | apple-touch-icon.png (convention) |
The HTML
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Many browsers also look for /apple-touch-icon.png in the site root even without the tag, but include it to be safe.
Design tips
- No transparency. iOS fills transparent areas with black.
- Leave padding. Keep the logo away from the edges, since corners are rounded.
- Simple shapes. It appears next to app icons, so keep it bold.
- Brand colour background helps it stand out on home screens.
Make one in seconds
- Open Tabby (runs in your browser).
- Start from your logo, letters or an emoji.
- Choose a background colour and padding.
- Download the pack; it includes the Apple touch icon and the HTML.
For the full list of icons, see favicon sizes. On WordPress, the Site Icon setting generates this file for you: see how.
Frequently asked questions
Do I need several Apple icon sizes?
No. One 180 px icon is scaled for other devices.
Should I use the “precomposed” version?
Not needed on modern iOS.
Does Android use it?
Android uses icons from your web app manifest instead: see maskable icons.