For compatibility with all browsers stick with .ico. .png is getting more and more support though as it is easier to create using multiple programs. for .ico <link rel=”shortcut icon” href=”http://example.com/myicon.ico” /> for .png, you need to specify the type <link rel=”icon” type=”image/png” href=”http://example.com/image.png” />
I think for the most part it does not result in another HTTP request as these are usually dumped in the browser’s cache after the first access. This is actually more efficient than any of the proposed “solutions”.
Update for 2020: Sticking to the original question of 16×16 versus 32×32 icons: the current recommendation should be to provide a 32×32 icon, skipping 16×16 entirely. All current browsers and devices support 32×32 icons. The icon will routinely be upscaled to as much as 192×192 depending on the environment (assuming there are no larger sizes … Read more
Why not? var link = document.querySelector(“link[rel~=’icon’]”); if (!link) { link = document.createElement(‘link’); link.rel=”icon”; document.getElementsByTagName(‘head’)[0].appendChild(link); } link.href=”https://stackoverflow.com/favicon.ico”;
All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you’ve specified a shortcut icon via <link>. So if you don’t explicitly specify one, it’s best to always have a favicon.ico file, to avoid a 404. Yahoo! suggests you make it small and cacheable. … Read more
I will first say that having a favicon in a Web page is a good thing (normally). However it is not always desired and sometime developers need a way to avoid the extra payload. For example an IFRAME would request a favicon without showing it. Worst yet, in Chrome and Android an IFRAME will generate … Read more
There are actually two ways to add a favicon to a website. <link rel=”icon”> Simply add the following code to the <head> element: <link rel=”icon” href=”http://example.com/favicon.png”> PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons. Note that you don’t have to precede icon in rel … Read more
You can make a .png image and then use one of the following snippets between the <head> tags of your static HTML documents: <link rel=”icon” type=”image/png” href=”https://stackoverflow.com/favicon.png”/> <link rel=”icon” type=”image/png” href=”https://example.com/favicon.png”/>
Update for 2020: Sticking to the original question of 16×16 versus 32×32 icons: the current recommendation should be to provide a 32×32 icon, skipping 16×16 entirely. All current browsers and devices support 32×32 icons. The icon will routinely be upscaled to as much as 192×192 depending on the environment (assuming there are no larger sizes … Read more
To refresh your site’s favicon you can force browsers to download a new version using the link tag and a query string on your filename. This is especially helpful in production environments to make sure your users get the update. <link rel=”icon” href=”http://www.yoursite.com/favicon.ico?v=2″ />