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.

  • 5
    try 3 different pictures – riseagainst Feb 11 '13 at 12:13
  • sure i can use a different image for apple-touch-icon, but then my question still stands, which one will get loaded? i don't want a browser to load and use favicon.ico when favicon.png and apple-touch-icon are available, for example... i want to know what order should i put them in, if i just want browsers to load the highest resolution they support for. – sunnz Feb 11 '13 at 14:22
  • Again, you can test this by using 3 different images. One blue, one green one red. Test them, play with the order and you will find out. – riseagainst Feb 11 '13 at 14:57

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


<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.

| improve this answer | |
  • That's not accurate. Some browsers behave exactly the opposite way, regarding favicons – fat_mike Sep 9 '15 at 2:42

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.

| improve this answer | |

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) {
| improve this answer | |
  • 4
    You state "You can change the favicon manually for IE:", yet the comment at the top of your code states "except... Internet Explorer"?! – MrWhite Mar 2 '13 at 19:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.