Apple touch icon generator
Make the icon iPhones and iPads show when someone adds your site to their home screen: a 180×180 apple-touch-icon.png with a solid background, plus the iPad sizes.
How iOS turns your PNG into a home-screen icon
iOS takes the square PNG you link, masks it into its rounded “squircle” and places it on the home screen next to native apps. Two consequences: draw a full square (don’t pre-round the corners, or you get a double-rounded edge), and don’t leave transparent areas, which iOS paints black. That’s why the Apple icons in this generator are always opaque, even when your favicon has a transparent tile.
Leave some breathing room: a mark that fills about 60% of the square looks at home next to App Store icons. The Size slider defaults to 62% on this page for that reason.
Sizes
| File | Device |
|---|---|
apple-touch-icon.png (180 × 180) | iPhone (all current models). The only one you need. |
apple-touch-icon-167x167.png | iPad Pro |
apple-touch-icon-152x152.png | iPad, iPad mini |
apple-touch-icon-120x120.png | Older iPhones |
Link just the 180 px file: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. See how to add a favicon for the rest of the tags.
Questions people ask
What size is an Apple touch icon?
180×180 pixels for current iPhones. iPads use 167×167 (iPad Pro) and 152×152, and older iPhones 120×120. iOS scales the 180 px file down when needed, so a single apple-touch-icon.png is enough for most sites.
Should the Apple touch icon be transparent?
No. iOS fills transparent pixels with black. Use a solid background; iOS rounds the corners itself, so draw a full square.
What is the HTML for an Apple touch icon?
<link rel="apple-touch-icon" href="/apple-touch-icon.png">. With several sizes, add a sizes attribute to each, for example sizes="152x152". iOS also requests /apple-touch-icon.png at the root without any tag.
Is apple-touch-icon-precomposed still needed?
No. It told iOS 6 and earlier not to add a glossy effect. iOS 7 removed the effect, so plain apple-touch-icon is all you need.
Does iOS use the web manifest icons?
Safari on iOS reads the manifest for the app name and display mode, but for the home-screen icon it still prefers rel="apple-touch-icon". Provide both.