iPhone · iPad · Add to Home Screen
Apple touch icon generator
When someone adds your site to their iPhone or iPad home screen, iOS uses apple-touch-icon.png. It wants a 180 × 180 square with no transparency, and it rounds the corners itself.
1Artwork
Drag to move, pinch or press + / − to zoom. Drop or paste a new image anywhere on the square.
PNG, JPEG, WebP, GIF, AVIF, SVG or ICO. Drop it on the square, or paste it.
2Home screen
The file180 × 180, as saved
PNG, 180 × 180, opaque
Paste into <head>
<link rel="apple-touch-icon" href="/apple-touch-icon.png">How it works
Drop a logo, crop it, and set the padding and background. The preview shows the icon on a home screen at the size iOS uses, with the system's rounded corners applied, next to the square file you will upload.
- No transparency. iOS fills transparent pixels with black, so the background is always opaque here.
- Square corners. Leave the file square; iOS applies its own corner radius, and pre-rounded corners end up with dark edges.
- One size. 180 × 180 covers current iPhones and iPads; iOS scales it down where it needs smaller icons.
Upload the file to your site's root as /apple-touch-icon.png. iOS also looks there when no tag is present, but the link tag makes it explicit.
Questions
Do I still need 57, 120 or 152 px versions?
No. Those sizes were for older iPhones and iPads. A single 180 × 180 icon is downscaled cleanly wherever a smaller one is needed.
Does Android use this icon?
Some Android browsers fall back to it, but Android mainly uses the icons in your web manifest. Make those with the favicon generator or the maskable icon editor.
Can the label be different from my page title?
Yes. Add a meta tag named apple-mobile-web-app-title with the short label you want; otherwise iOS suggests the page title.