Apple Touch Icon Generator
Generate correct apple-touch-icon images for iPhone and iPad home screens. Upload your logo, get 180×180, 167×167, and 152×152 PNG icons with the HTML link tag — instantly.
Generate apple-touch-icon freeApple Touch icon sizes for iOS & iPad
iOS scales down from the largest icon available, so providing all sizes ensures the sharpest result on every device.
| Size | Device | Notes |
|---|---|---|
| 180×180 | iPhone (all modern) | Primary size — use this if only providing one |
| 167×167 | iPad Pro | Retina iPad Pro home screen |
| 152×152 | iPad, iPad mini | Standard retina iPad home screen |
The correct HTML tag
Add this to your <head>. Snappicon generates this snippet for you automatically.
<!-- Apple Touch Icons --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" /> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
Next.js App Router: Place apple-icon.png (180×180) in your app/ directory. Next.js generates the link tag automatically — no code needed.
Common apple-touch-icon mistakes
Transparent background
iOS renders transparent areas as black. Always use a solid background color on your apple-touch-icon.
Forgetting it entirely
PWA manifest icons don't cover iOS. Without an apple-touch-icon tag, iOS will screenshot your page as the home screen icon.
Wrong file name
The apple-touch-icon.png at the root of your site is auto-discovered by iOS, but only the 180×180 version. Use explicit link tags for all sizes.
Using SVG
iOS does not support SVG for apple-touch-icons. Always use PNG.
Apple touch icon FAQ
What is an apple-touch-icon?
An apple-touch-icon is the image iOS uses when a user adds your website to their home screen. Unlike a regular favicon, it needs to be a PNG with a solid background at 180×180px or larger.
What size should an apple-touch-icon be?
180×180px PNG is the recommended size for iPhone. For full iPad coverage also include 167×167 (iPad Pro) and 152×152 (iPad, iPad mini). iOS will scale down from the largest available size.
Does my apple-touch-icon need a transparent background?
No — and it shouldn't have one. iOS does not add a background for apple-touch-icons. Use a solid color background. iOS will add the rounded corners automatically.
How do I add an apple-touch-icon to my website?
Add this tag to your HTML <head>: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />. In Next.js App Router, place apple-icon.png in your app/ directory and Next.js generates the tag automatically.
Do I need an apple-touch-icon if I have PWA icons?
Yes. iOS does not read the web manifest icons — it only reads the apple-touch-icon link tag. You need both the manifest icons (for Android/Chrome PWA) and the apple-touch-icon (for iOS).
Related tools & guides
Generate apple-touch-icons now — free
Upload your logo, get all iOS sizes with the correct HTML snippet. No account needed.
Generate apple-touch-icon free