NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.
You have to include a boatload of
link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':
Why all these different images are necessary is quite complex: Cheat Sheet, Mathias—pedia—Bynens. Many online generators attempt to automate this for us, but most are incomplete or simply wrong. realfavicongenerator seems to be the best out there…
Even with automated generation I, personally, don't want to have to add all this extra markup to my HTML.
Because of browser convention we do not need to
link to either the
apple-touch-icon-*.png: simply prepare all the different images, give them the appropriate filename and upload them at the root of your site. This works in 90% of the cases.
According to Mathias—Pedia—Bynens you need the following images:
favicon.icoincluding various sizes: 16x16, 32x32, 48x48?
apple-touch-icon-57x57[-precomposed].pngfor non-Retina iPhone and iPod Touch (@1× display)
apple-touch-icon-72x72[-precomposed].pngfor the iPad mini and the gen1 and gen2 iPad (@1× display) on iOS ≤ 6
apple-touch-icon-76x76[-precomposed].pngfor the iPad mini and the gen1 and gen2 iPad (@1× display) on iOS ≥ 7
apple-touch-icon-114x114[-precomposed].pngfor iPhone 4+ (with @2× display) on iOS ≤ 6
apple-touch-icon-120x120[-precomposed].pngfor iPhone 4+ (with @2× display) on iOS ≥ 7
apple-touch-icon-144x144[-precomposed].pngfor iPad 3+ (with @2× display)
apple-touch-icon-152x152[-precomposed].pngfor iPad 3+ (with @2× display)
apple-touch-icon-180x180[-precomposed].pngfor iPhone 6 Plus (with @3× display)
touch-icon-192x192.pngfor Chrome for Android
apple-touch-icon.pngas a fallback for everything else (possibly including non-Apple devices).
That's a lot of images… (and misses some other stuff such as Win8 Tiles (
browserconfig.xml), Adroid 'Add to Homescreen' (
One Icon to Rule Them All
…or actually two, if you count
…and not really all: it only handles
The obvious work-around to avoid having to generate all these images is to rewrite requests:
RewriteRule ^apple-touch-icon(.*).png$ apple-touch-icon.png [L]
Which is how the man himself karate-kicks his apple-touch-icons in submission with one 152x152 png.
- This obviously means you will provide one size
apple-touch-icons. Make it at least 152x152 & optimize the crap out of it.
- Often the image will be down-scaled which is not always pretty. KISS your DRY Icons.
Doing only the above will provide icons to many desktop and mobile browsers, but you'll miss:
- Android 'Add to Homescreen' manifest.json
- Win8 Tiles
- IE 11 browserconfig.xml (404!)
- … and more? (Opera Coast, etc)
However, it does handle 90% of what you need.
I will probably stick with the the following most of the time (all in the root):
favicon.ico(16x16 and 32x32)
RewriteRule ^apple-touch-icon(.*).png$ apple-touch-icon.png [L]for all touch icon requests
I'll make sure my icon is:
- Simple (design)
- Scalable (down/up scaling does not distort quality too much)
- Lightweight (compressed/optimized)
When I'd need more control over specific use-cases, such as 'add to Homescreen', Windows Tiles, etc I'd add:
browserconfig.xmlwith Tile images and colors for 'Windows (Wide) Tiles'
manifest.jsonwith images and colors for 'Web Apps'
What about you?