Best way to get favicon working cross browser/platform

Question

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.

Answer 1

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.

Answer 2

Question 1 is easy. Drop a favicon.ico in your site root and all browsers will read it, even legacy ones like IE4. The favicon can contain more than one size and browsers will pick the best but recommended sizes are 128x128 (hi-res desktop), 64x64 (desktop), 16x16 (browser tab). This solution relies on Microsoft's de-facto standards which aren't themselves optimal but the browser support is excellent. This covers all cases I know of except the stupid iDevice-specific "apple-touch-icon-precomposed" crap and you seem to have a handle on that already.

If you use this method you don't even need the meta-tag but the meta-tag has one advantage which is it allows you to force a favicon refresh as so:

<link rel="shortcut icon" href="/favicon.ico?ver=2" />

Question 2 is hard to answer because new devices are always coming out. I'm not personally convinced that covering "every possibility" is even necessary since most of the time the best fit will be scaled by the device as required. Having at least one hi-res version should be sufficient.

Don't overthink this. I launch most sites with a single 64x64 icon file and no client has ever complained about quality or compatibility issues. I only add other sizes in cases where the high-res version doesn't look good at 16x16.