Remove apple touch icons from your markup
without losing the icons
apple-touch-icon is an image used on
iOS devices when a website is added to the homescreen.
iOS devices display icons at different sizes, and so it's common to see something like this:
You can remove all this code from your
Just like with favicon.ico you can remove these links and place a single
apple-touch-icon.png in your root directory.
180x180 is the largest icon size any
iOS device requires.1 Other devices will downscale the image to fit. — and as of writing this —
Apple use a single
152x152 icon on
What about other sizes?
If you'd still rather specify a different image for every possible icon size, you can still do that without adding any code to your
You can place multiple
apple-touch-icons in your site's root directory.2 So long as they're named in the following way:
specify size and precomposed
Older versions of
Chrome for Android used
apple-touch-icons for adding shortcuts to the homescreen. But only if a large enough non-apple icon wasn't found.
Some of older versions of
android would look for
apple-touch-icons at the site's root.3 But this practice ended as it was using
3-4% of mobile users bandwith!
android can't find a large icon to use. It will use the site's
Apple — Human Interface Guidelines ↩︎
Matias Bynens Blog ↩︎