Apple Touch Icon Generator
Create a crisp apple-touch-icon.png for the iOS and iPadOS home screen. Upload an image or type a letter, set a solid background (iOS ignores transparency), preview the rounded result, and export 180×180 plus the 167, 152 and 120 sizes — with the exact <link rel="apple-touch-icon"> tags to paste into your <head>.
180 ×180 default
4 sizes
0 uploads
Free
Apple Touch Icon Generator
This Apple Touch Icon generator builds the apple-touch-icon.png that iPhone and iPad use when someone adds your site to their home screen, and gives you the exact <link rel="apple-touch-icon"> tags to paste into your <head>. Upload artwork or type a letter, set a solid background (iOS discards transparency), and export 180×180 plus the 167, 152 and 120 fallbacks. It runs entirely in your browser — no upload, no signup.
What is an Apple Touch Icon?
The Apple Touch Icon is the image iOS and iPadOS show when a user taps Share → Add to Home Screen on your website in Safari. It is declared with <link rel="apple-touch-icon">. If you do not provide one, iOS falls back to a blurry screenshot of your page, which looks broken next to native app icons. Providing a clean icon is a small detail that makes a site feel professional and "installable", and it is one of the most common things missing from otherwise well-built sites.
What size should an Apple Touch Icon be?
For current devices, 180×180 is the recommended size and is what you should ship first — a single 180×180 PNG covers virtually every modern iPhone. If you want pixel-perfect icons on older hardware you can also provide 167×167 (iPad Pro), 152×152 (older iPad) and 120×120 (older iPhone). This tool exports all four with one click each so you can decide how thorough to be. There is no separate "apple touch icon size" you have to memorise — 180 is the answer for almost every site in 2026.
Rounded corners and the gloss effect
Always supply a square icon with square corners. iOS automatically applies its signature rounded-rectangle mask, and on very old versions it also added a glossy highlight. If you round the corners yourself, iOS rounds them again and you get transparent gaps at the edges. The "On the home screen" preview above shows the rounded result so you can confirm your logo is not clipped by the corner radius. Keep important detail and text a comfortable margin away from the edges.
apple-touch-icon vs apple-touch-icon-precomposed
You may still see rel="apple-touch-icon-precomposed" in older templates. The "precomposed" variant told early iOS not to add its glossy overlay. Modern iOS no longer applies gloss to either variant, so apple-touch-icon-precomposed is obsolete — use plain rel="apple-touch-icon". We mention it only because the precomposed tag persists in copy-pasted boilerplate around the web and people search for what it means.
The HTML, and where the file goes
Save the export as apple-touch-icon.png at your site root. Safari will even find it automatically at the root path, but it is best practice to declare it explicitly: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Add extra tags with different sizes attributes only if you actually ship those files. The Apple Touch Icon is independent of your PWA manifest icons and your browser favicon, so a complete setup usually includes all three.
Finish the whole icon set
An Apple Touch Icon handles iOS, but you still need a browser favicon and Android icons. Use our favicon generator to produce the 16/32/48 favicons in one ZIP, our web manifest generator to wire up the PWA site.webmanifest, and our maskable icon generator to make the Android adaptive icon that will not get clipped. Together they cover every platform that shows an icon for your site.
apple touch icon apple touch icon generator apple touch icon size apple touch icon png apple-touch-icon precomposed apple touch icon 180x180 apple touch icon link apple touch icon html ios home screen icon add to home screen
© 2026 hjLabs.in · Built on Cloudflare Workers