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 Commented Feb 11, 2013 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
    Commented Feb 11, 2013 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. Commented Feb 11, 2013 at 14:57

3 Answers 3


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.

  • That's not accurate. Some browsers behave exactly the opposite way, regarding favicons
    – fat_mike
    Commented Sep 9, 2015 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.


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) {
  • 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
    Commented Mar 2, 2013 at 19:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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