: Which favicon gets loaded in the browser? 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

@Gretchen104

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 example.com/favicon.ico.

Vote Up Vote Down

@Pope3001725

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.

Vote Up Vote Down

@Margaret670

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: mathiasbynens.be/demo/dynamic-favicons */

// HTML5™, baby! 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);
}

Vote Up Vote Down