Apple Touch Icon Generator - iPhone & iPad Home Screen Icon, Free

How to make an Apple touch icon

Add your logo. Drop a PNG, SVG, JPG, WebP or other image. A square logo of at least 180 px works best. It stays on your device.
Pick the background. iPhones show transparency as black, so the icon gets a solid colour. White is the default - try Dark tile or your brand colour.
Check the home screen. The preview shows your icon on a light and a dark iPhone home screen. Add padding if the logo touches the edges.
Download and add it. Press Make my Apple icons. Upload apple-touch-icon.png to the root of your site and paste the HTML line into your <head>.

Building an Android or PWA icon too? The Android Icon Generator makes those.

What is an Apple touch icon?

When someone taps Share, then Add to Home Screen in Safari, iOS puts your site on the home screen like an app. The picture it uses is the Apple touch icon.

iOS also uses it for bookmarks, the favourites grid and Handoff. Without one, iPhone shows a blurry screenshot of your page.

Which sizes do you need?

File	Size	Used by
apple-touch-icon.png	180 x 180 px	Every iPhone since the iPhone 6 Plus - the one that matters
apple-touch-icon-167x167.png	167 x 167 px	iPad Pro
apple-touch-icon-152x152.png	152 x 152 px	iPad and iPad mini
apple-touch-icon-120x120.png	120 x 120 px	Older iPhones
apple-touch-icon-precomposed.png	180 x 180 px	Some old browsers and apps still ask for this name

Modern iOS scales the 180 px icon for every device, so Modern is enough for most sites. Pick Every iOS size if you want pixel-exact icons on iPads.

Why the icon has a solid background

No transparency. iOS fills transparent pixels with black, so a logo with a see-through background ends up in a black square.
No rounded corners in the file. iOS cuts the rounded shape itself. Pre-rounded icons get a thin dark ring.
Leave some room. About 8-12% padding keeps the logo clear of the rounded corners.

Need a round or transparent favicon for browser tabs instead? Use PNG to Favicon.

How to add it to your website

Upload apple-touch-icon.png (and the other sizes, if you made them) to the root folder of your site.
Paste the lines from apple-touch-icon-html.txt into the <head> of your pages.
On an iPhone, open your site in Safari, tap Share, then Add to Home Screen to see it.

iOS checks /apple-touch-icon.png even without the HTML line, so keep that name in the root. Then test the whole setup with the Favicon Checker.

Frequently Asked Questions

180 x 180 px. iOS scales it down for iPads and older iPhones, so one file covers every device. Extra sizes are optional.

It can, but iOS fills the transparent parts with black. That is why this tool always gives the icon a solid background - white, dark or any colour you pick.

No. iOS rounds the corners automatically. A file that is already rounded gets a thin dark edge, so keep it square.

In the root folder of your site, next to your home page. iOS looks there even when the HTML does not mention it.

An old name from iOS 6 and earlier, when iOS added a glossy effect. Some apps and crawlers still request it, so Every iOS size includes it.

Type it under Home screen name. It goes into the apple-mobile-web-app-title meta tag. Without it iOS uses your page title.

No. Every icon is made in your browser, on your device. Nothing is uploaded.

Upload the files, then run your site through the Favicon Checker. It lists every icon your pages point to and shows what is missing.