Apple touch icon generator
Make the icon iOS uses when someone adds your site to their home screen — at the correct 180×180 size, with a background that won't render black.
Open the favicon generator →What an apple-touch-icon is
Apple introduced the convention with the original iPhone's home-screen bookmarks, and it has stuck around ever since as the icon for "Add to Home Screen" shortcuts in Safari on iOS and iPadOS. Unlike a regular favicon, iOS doesn't fall back to your favicon.ico for this — it looks specifically for an apple-touch-icon link tag or the default /apple-touch-icon.png path.
Generate and install
Upload a square image or use text mode, generate, and download apple-touch-icon.png. Then add:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Older guidance recommended multiple sizes (57, 60, 72, 76, 114, 120, 152px) for different device generations. Current iOS and iPadOS only need the single 180×180 — Safari scales it down for older devices automatically, so there's no benefit to shipping the smaller variants anymore.
Background and safe area
Give the icon a solid background color — iOS renders transparent pixels as black on many versions, which looks broken next to your neighbors' icons on the home screen. iOS also applies its own rounded-square mask, so keep your important content away from the very edges (roughly a 10% margin) so nothing gets clipped.
Testing it
Because Safari caches apple-touch-icons aggressively, the reliable way to verify a new one is to remove the existing home-screen bookmark, clear Safari's cache (or use a private tab), then re-add the site to your home screen and check the icon before shipping.
How it relates to your other icons
The apple-touch-icon is one piece of a small family of files: favicon.ico covers the browser tab and legacy requests, android-chrome-192x192.png and android-chrome-512x512.png cover Android's home screen and PWA install prompts via site.webmanifest, and this 180×180 PNG covers iOS specifically. None of them substitutes for another — a site missing just the apple-touch-icon will otherwise look fine in every browser tab, then show a plain screenshot thumbnail or a default gray square the moment an iPhone user tries to add it to their home screen.
What if I only care about iOS?
Even if desktop browser polish isn't a priority, it's worth generating the full set anyway rather than only the apple-touch-icon — the marginal cost is zero once you've uploaded one source image, and skipping the others just means a blank tab icon on desktop and a generic fallback in search results later. GenHub's favicon generator produces the whole family from a single upload, so there's no reason to generate them separately.
FAQ
Should the icon have rounded corners?
No — supply a square icon. iOS applies its own corner radius automatically.
Does it need a background?
Yes, use a solid background. Transparent areas render black on some iOS versions.
Do I need separate icons for iPhone and iPad?
No. A single 180×180 PNG covers current iOS and iPadOS — Safari scales it as needed.
Where does GenHub host the file?
Nowhere — it's a download. Host apple-touch-icon.png on your own site at the root, or wherever your tag points.
Does Android use the apple-touch-icon too?
No — Android and Chrome PWA installs read the android-chrome-192x192.png and android-chrome-512x512.png entries in site.webmanifest instead, so both families are needed for full coverage.