[quote=“pmeenan, post:6, topic:449”]
I do think you need 2 different entries to support various browsers.[/quote]
More or less, yes. You don’t strictly need the 2 versions that you show, because the ICO format is understood by every major desktop browser. But you might want to have 2 links nevertheless, one for desktop browsers, and one for Apple’s proprietary Apple Touch Icon which is used by iPhones, iPads etc.
So I would recommend (in HTML4 / HTML5 syntax):
<!-- Major desktop browsers -->
<link rel="shortcut icon" href="/images/favicon.ico">
<!-- Apple specific -->
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
or alternatively for sites which use both HTTP and HTTPS ("//" is a shortcut for the same HTTP/HTTPS as the HTML page itself has):
<link rel="shortcut icon" href="//www.company.com/images/favicon.ico">
<link rel="apple-touch-icon" href="//www.company.com/images/apple-touch-icon.png">
(If the website in question is using a CDN, the favicons should be served over the CDN and the URLs above adapted to this.)
3 quick side notes about favicons:
The ICO format is actually a container which can have multiple resolutions in it (16x16, 32x32, et cetera). Keep this in mind when making the ICO.
The type=“image/vnd.microsoft.icon” should not be necessary, since any modern web server ought to recognize the .ico file extension and serve the favicon itself with the correct MIME type.
[*]rel=“shortcut icon” is actually not standards-compliant HTML markup (the space between the two words). But it works, and is understood by every browser AFAIK.