Zero byte
apple-touch-icons markup
Remove apple touch icons from your markup
without losing the icons
An apple-touch-icon
is an image used on iOS
devices when a website is added to the homescreen.
Different 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 <head>
!
Just like with favicon.ico you can remove these links and place a single apple-touch-icon.png
in your root directory.
e.g. https://example.com/apple-touch-icon.png
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 apple.com
.
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 <head>
.
You can place multiple apple-touch-icons
in your site's root directory.2 So long as they're named in the following way:
default
/apple-touch-icon.png
specify size
/apple-touch-icon-72x72.png
specify precomposed
/apple-touch-icon-precomposed.png
specify size and precomposed
/apple-touch-icon-57x57-precomposed.png
Android and apple-touch-icons
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!
If android
can't find a large icon to use. It will use the site's favicon.