Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
5  
try 3 different pictures –  guisasso 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. –  guisasso Feb 11 '13 at 14:57
    
oh! of course! will try it out! thanks! –  sunnz Feb 12 '13 at 7:58
add comment

3 Answers

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.

share|improve this answer
add comment

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

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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