After reading through these two articles (One Two) I am confused as to how I can cover all platforms and browsers to get an optimal favicon for their use.
Now, I have this, but I am not sure whether this is optimal.
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/vnd.microsoft.icon">
I'm not sure what size apple-touch-icon-precomposed.png should be either.
But to cut to the chase (tl;dr): what is the best way to cover as many platforms and browsers and what sizes are recommended for the icons?
Bounty will be given to the one who can answer the two questions: 1. what is the best way to cover as many platforms and browsers as possible; 2. which sizes are needed for every occurrence.
Ok you looked at http://mathiasbynens.be/notes/touch-icons as He is one of the guys that suggested the changes in html5 boilderplate concerning apple-touch-icons
From His site there is a summary as follows:
So, which technique to use? It all depends, really.
If Android support is a must, you’ll have to use HTML, and I’d recommend using the last code snippet under the “Different icon sizes” section. If iOS is all you care about, I strongly suggest using the no-HTML approach. If you’re lazy and don’t really care about Android, legacy iOS versions, or performance, I suppose you could just use a single 152×152 icon, name it apple-touch-icon-precomposed.png and place it in the root of your website.
HERE is the test case he used with the script AND all the sizes:
http://mathiasbynens.be/demo/touch-icon
This should answer 1. and also 2. plus you can sleep well because he actually did crowd testing and got all test cases covered.