which favicon gets loaded in the browser?

Question

currently i am experimenting with 2 favicons and including them in 3 different ways in my markup, however i am not sure which one gets loaded in the browser. firebug's network tab doesn't tell me which one it downloaded.

  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="favicon.png">

where favicon.png is 144x144px and favicon.ico is 16x16px.

idealy i want all browsers to use the png instead of ico whenever they support it, and just fallback to ico for ie. i am not sure how to verify if the code is already doing this or not.

Answer 1

You should also change the order from lowest resolution, to highest. Since the browsers will use the last instance that they can use.

Your:

<link rel="icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="favicon.png">

Should be:

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="favicon.png">

So any browser that is looking for rel="icon" and can use the .png, will.

Answer 2

According to a Wikipedia article on how to use Favicon, the recommended way to use a favicon is with the code <link rel="shortcut icon" href="http://example.com/myicon.ico" /> because (of course) Internet Explorer doesn't understand PNG, and GIF as a icon or the type attribute. You should also place favicon.ico in the root directory of your website so it is http://example.com/favicon.ico.

Answer 3

You can change the favicon manually for IE:

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head = document.head || document.getElementsByTagName('head')[0];

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {
  document.head.removeChild(oldLink);
 }
 document.head.appendChild(link);
}