What does this tool do?

Although many modern web browsers support favicons saved as GIFs, PNGs or other popular file formats all versions of Internet Explorer still require favicons to be saved as ICO files (a Microsoft icon format). This tool provides an easy way to convert any GIF, PNG or JPEG to ICO which is supported by all modern web browsers. It also enables you to create favicons from scratch via a handy online editor. Additionally the editor lets you manually tweak generated favicons to ensure the best possible result.

Using a favicon

After generating a favicon with this tool download and save to the root directory of your site. Then include the following code in the head of your HTML document.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

A favicon /ˈfæv.ɪˌkɒn/ (short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page. A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

In March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time. Originally, the favicon was a file called favicon.ico placed in the root directory (e.g., http://en.wikipedia.org/favicon.ico) of a web site. It was used in Internet Explorer's favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked. A side effect was that the number of visitors who had bookmarked the page could be estimated by the requests of the favicon. This side effect no longer works, as all modern browsers load the favicon file to display in their web address bar, regardless of whether the site is bookmarked.

The favicon was standardized by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, released in December 1999, and later in the XHTML 1.0 recommendation, released in January 2000. The standard implementation uses a link element with a rel attribute in the section of the document to specify the file format and file name and location. Unlike in the prior scheme, the file can be in any Web site directory and have any image file format.

In 2003, the .ico format was registered by a third party with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon. Ironically, when using the .ico format to display as images (e.g. not as favicon), Internet Explorer cannot display files served with this standardized MIME type. A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.

RFC 5988 established an IANA link relation registry, and rel="icon" was registered in 2010 based on the HTML5 specification. The popular "<"link rel="shortcut icon" type="image/x-icon" href="favicon.ico" ">" / theoretically identifies two relations, "shortcut" and "icon", but "shortcut" is not registered and is redundant. In 2011 the HTML living standard specified that for historical reasons "shortcut" is allowed immediately before "icon"; however, "shortcut" does not have a meaning in this context.

How do I force a favicon refresh

I have a Grails application running locally using its own tomcat and I have just changed the favicon for a new one. Problem is that I can't see it in any browser. The old favicon shows up or I get no favicon at all, but not my new one. I don't think this is a Grails issue per se, more an issue wth favicons.

What is supposed to happen with favicons? How are they supposed to work? I have numerous bookmarks in my browser which have the wrong icons and they never seem to get refreshed. How do I force the server/browser to stop cacheing them? It seems pretty silly to always cache them given they are normally only 16x16. Why not just upload every visit to the page, it's not exactly a huge overhead.

To refresh your site's favicon you can force browsers to download a new version using the link tag and a querystring 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" />

Well, overhead is overhead, but yes, not too big.

Also, browsers are sometimes "greedy" about cached files. You could clear cache and/or restart your browser and may see the change. If that fails though...

My cheapo solution is to:

  1. Visit your file at http://example.com/favicon.ico in your browser.
  2. Delete the favicon.ico from your webroot.
  3. Visit http://example.com/favicon.ico again in a browser, verify it's missing.
  4. Upload new one to your webroot.
  5. Visit http://example.com/favicon.ico again in a browser, verify it's the new one.

If that sequence doesn't work, then something else is going on.

Does a favicon have to be 32x32 or 16x16?

I don't see any up to date info listed here, so here goes:

To answer this question now, 2 favicons will not do it if you want your icon to look great everywhere. See the sizes below:

16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile

Adding a favicon to a static HTML page

I have a few static pages that are just pure HTML, that we display when the server goes down. How can I put a favicon that I made (it's 16x16px and it's sitting in the same directory as the HTML file; it's called favicon.ico) as the "tab" icon as it were. I have read up on Wikipedia and looked at a few tutorials and have implemented the following:

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

But it still doesn't want to work. I am using Chrome to test the sites. According to Wikipedia .ico is the best pic format that runs on all browser types.

Update

I could not get this to work locally although the code checks out it will only really work properly once the server started serving the site. Just try pushing it up to the server and refresh your cache and it should work fine.

you can make a 16x16 png and use

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://eg.com/favicon.png"/>

Does a favicon have to be 32x32 or 16x16?

For IE, Microsoft recommends 16x16, 32x32 and 48x48 packed in the favicon.ico file.

For iOS, Apple recommends specific file names and resolutions, at most 180x180 for latest devices running iOS 8.

Android Chrome primarily uses a manifest and also relies on the Apple touch icon.

IE 10 on Windows 8.0 requires PNG pictures and a background color and IE 11 on Windows 8.1 and 10 accepts several PNG pictures declared in a dedicated XML file called browserconfig.xml.

Safari for Mac OS X El Capitan introduces an SVG icon for pinned tabs.

Some other platforms look for PNG files with various resolutions, like the 96x96 picture for Google TV or the 228x228 picture for Opera Coast.

Look at this favicon pictures list for a complete reference.

This favicon generator can generate all these files at once, with the corresponding HTML code. The generator can also be implemented as a WordPress plugin. Full disclosure: I am the author of this site.

How to add a browser tab icon (favicon) for a website?

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 attribute with shortcut anymore. From MDN Link types:

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

favicon.ico in the root directory

From another SO answer (by @mercator):

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 all you have to do is to make the /favicon.ico request to your website return your favicon. This option unfortunately doesn't allow you to use a PNG icon.

See also:

There are a number of different icons and even splash screens that you can set for various devices. This answer goes through how to support them all.

Here are some snippets I have used with relevant links to where I gathered the information. See my blog for more information and more information about the ASP.NET MVC Boilerplate project template with all this built in right out of the box (Including sample image files).

Add the following mark-up to your html head. The commented out sections are entirely optional. While the uncommented sections are recommended to cover all icon usages. Don't be scared, most if it is comments to help you.

How to prevent favicon.ico requests?

I don't have a favicon.ico, but IE always makes a request for it.

Is it possible to prevent the browser to make a request for the favicon of my site? Maybe some META-TAG in the HTML header?

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 3 requests for favicons:

"GET /favicon.ico HTTP/1.1" 404 183
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197
"GET /apple-touch-icon.png HTTP/1.1" 404 189

The following uses data URI and can be used to avoid fake favicon requests:

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

For references see here:

The Chrome bug/behavior will probably be fixed in upcoming versions.

Here is the bug submission for you to vote:

UPDATE 1:

From the comments (jpic) it looks like Firefox >= 25 doesn't like the above syntax anymore. I tested on Firefox 27 and it doesn't work while it still work on Webkit/Chrome.

So here is the new one that should cover all recent browsers. I tested Safari, Chrome and Firefox:

<link rel="icon" href="data:;base64,=">

I left out the "shortcut" name from the "rel" attribute value since that's only for older IE and versions of IE < 8 doesn't like dataURIs either. Not tested on IE8.

UPDATE 2:

If you need your document to validate against HTML5 use this instead:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">

You can use .htaccess or server directives to deny access to favicon.ico, but the server will send an access denied reply to the browser and this still slows page access.

You can stop the browser requesting favicon.ico when a user returns to your site, by getting it to stay in the browser cache.

First, provide a small favicon.ico image, could be blank, but as small as possible. I made a black and white one under 200 bytes. Then, using .htaccess or server directives, set the file Expires header a month or two in the future. When the same user comes back to your site it will be loaded from the browser cache and no request will go to your site. No more 404's in the server logs too.

If you have control over a complete Apache server or maybe a virtual server you can do this:-

If the server document root is say /var/www/html then add this to /etc/httpd/conf/httpd.conf:-

Alias /favicon.ico "/var/www/html/favicon.ico"
<Directory "/var/www/html">
 <Files favicon.ico>
 ExpiresActive On
 ExpiresDefault "access plus 1 month"
 </Files>
</Directory>

Then a single favicon.ico will work for all the virtual hosted sites since you are aliasing it. It will be drawn from the browser cache for a month after the users visit.

For .htaccess this is reported to work (not checked by me):-

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"

How to force browser to reload cached CSS/JS files?

I have noticed that some browsers (in particular, Firefox and Opera) are very zealous in using cached copies of .css and .js files, even between browser sessions. This leads to a problem when you update one of these files but the user's browser keeps on using the cached copy.

The question is: what is the most elegant way of forcing the user's browser to reload the file when it has changed?

Ideally the solution would not force the browser to reload the file on every visit to the page. I will post my own solution as an answer, but I am curious if anyone has a better solution and I'll let your votes decide.

Update:

After allowing discussion here for a while, I have found John Millikin and da5id's suggestion to be useful. It turns out there is a term for this: auto-versioning.

I have posted a new answer below which is a combination of my original solution and John's suggestion.

Another idea which was suggested by SCdF would be to append a bogus query string to the file. (Some Python code to automatically use the timestamp as a bogus query string was submitted by pi.). However, there is some discussion as to whether or not the browser would cache a file with a query string. (Remember, we want the browser to cache the file and use it on future visits. We only want it to fetch the file again when it has changed.)

Since it is not clear what happens with a bogus query string, I am not accepting that answer.

Update: Rewritten to incorporate suggestions from John Millikin and da5id. This solution is written in PHP, but should be easily adapted to other languages.

Update 2: Incorporating comments from Nick Johnson that the original .htaccess regex can cause problems with files like json-1.3.js. Solution is to only rewrite if there are exactly 10 digits at the end. (Because 10 digits covers all timestamps from 9/9/2001 to 11/20/2286.)

First, we use the following rewrite rule in .htaccess:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

Now, we write the following PHP function:

/**
 * Given a file, i.e. /css/base.css, replaces it with a string containing the
 * file's mtime, i.e. /css/base.1221534296.css.
 *
 * @param $file The file to be loaded. Must be an absolute path (i.e.
 * starting with slash).
 */
function auto_version($file)
{
 if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
 return $file;
 $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
 return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

Now, wherever you include your CSS, change it from this:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

To this:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

This way, you never have to modify the link tag again, and the user will always see the latest CSS. The browser will be able to cache the CSS file, but when you make any changes to your CSS the browser will see this as a new URL, so it won't use the cached copy.

This can also work with images, favicons, and JavaScript. Basically anything that is not dynamically generated.

Simple Client-side Technique

In general, caching is good.. So there are a couple of techniques, depending on whether you're fixing the problem for yourself as you develop a website, or whether you're trying to control cache in a production environment.

General visitors to your website won't have the same experience that you're having when you're developing the site. Since the average visitor comes to the site less frequently (maybe only a few times each month, unless you're a Google or hi5 Networks), then they are less likely to have your files in cache, and that may be enough. If you want to force a new version into the browser, you can always add a query string to the request, and bump up the version number when you make major changes:

<script src="/myJavascript.js?version=4"></script>

This will ensure that everyone gets the new file. It works because the browser looks at the URL of the file to determine whether it has a copy in cache. If your server isn't set up to do anything with the query string, it will be ignored, but the name will look like a new file to the browser.

On the other hand, if you're developing a website, you don't want to change the version number every time you save a change to your development version. That would be tedious.

So while you're developing your site, a good trick would be to automatically generate a query string parameter:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

Adding a query string to the request is a good way to version a resource, but for a simple website this may be unnecessary. And remember, caching is a good thing.

It's also worth noting that the browser isn't necessarily stingy about keeping files in cache. Browsers have policies for this sort of thing, and they are usually playing by the rules laid down in the HTTP specification. When a browser makes a request to a server, part of the response is an EXPIRES header.. a date which tells the browser how long it should be kept in cache. The next time the browser comes across a request for the same file, it sees that it has a copy in cache and looks to the EXPIRES date to decide whether it should be used.

So believe it or not, it's actually your server that is making that browser cache so persistent. You could adjust your server settings and change the EXPIRES headers, but the little technique I've written above is probably a much simpler way for you to go about it. Since caching is good, you usually want to set that date far into the future (a "Far-future Expires Header"), and use the technique described above to force a change.

If you're interested in more info on HTTP or how these requests are made, a good book is "High Performance Web Sites" by Steve Souders. It's a very good introduction to the subject.

Favicon dimensions?

The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. ICO format is different than PNG. Non-square pictures are not supported.

To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. Full disclosure: I'm the author of this site.

Long, comprehensive answer

Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.

The favicon is supported by several files:

In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.

favicon.ico

Although all desktop browsers can deal with this icon, it is primarily for older version of IE.

The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly, even when it was wrongly renamed with an ICO extension.

An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico. For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.

Declare the favicon with:

<link rel="icon" href="/path/to/icons/favicon.ico">

However, it is recommended to place favicon.ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.

PNG icons

Modern desktop browsers (IE11, recent versions of Chrome, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible". For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.

What are the recommended sizes? Pick your favorite platforms:

The PNG icons are declared with:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

Beware: Firefox does not support the sizes attribute and uses the last PNG icon it finds. Make sure to declare the 32x32 picture last: it is good enough for Firefox, and that will prevent it from downloading a big picture it does not need.

Also note that Chrome does not support the sizes attribute and tends to load all declared icons. Better not declare too many icons.

Mobile platforms

This question is about desktop favicon so there is no need to delve too much in this topic.

Apple defines touch icon for the iOS platform. iOS does not support non-square icon. It simply rescales non-square pictures to make them square (look for the Kioskea example).

Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.

Microsoft defines the tile picture and the browserconfig.xml file.

Conclusion

Generating a favicon that works everywhere is quite complex. I advise you to use this favicon generator. Full disclosure: I'm the author of this site.

favicon.png vs favicon.ico - why should I use PNG instead of ICO?

Answer replaced (and turned Community Wiki) due to numerous updates and notes from various others in this thread:

Feel free to consult the other answers here for more details.

favicon.png vs favicon.ico - why should I use PNG instead of ICO?

Answer replaced (and turned Community Wiki) due to numerous updates and notes from various others in this thread:

How to prevent favicon.ico requests?

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 3 requests for favicons:

"GET /favicon.ico HTTP/1.1" 404 183
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197
"GET /apple-touch-icon.png HTTP/1.1" 404 189

The following uses data URI and can be used to avoid fake favicon requests:

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

For references see here:

The Chrome bug/behavior will probably be fixed in upcoming versions.

Here is the bug submission for you to vote:

UPDATE 1:

From the comments (jpic) it looks like Firefox >= 25 doesn't like the above syntax anymore. I tested on Firefox 27 and it doesn't work while it still work on Webkit/Chrome.

So here is the new one that should cover all recent browsers. I tested Safari, Chrome and Firefox:

<link rel="icon" href="data:;base64,=">

I left out the "shortcut" name from the "rel" attribute value since that's only for older IE and versions of IE < 8 doesn't like dataURIs either. Not tested on IE8.

UPDATE 2:

If you need your document to validate against HTML5 use this instead:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">

Favicon: .ico or .png / correct tags?

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" />

HTML 5 Favicon - Support?

The answers provided (at the time of this post) are link only answers so I thought I would summarize the links into an answer and what I will be using.

When working to create Cross Browser Favicons (including touch icons) there are several things to consider.

The first (of course) is Internet Explorer. IE does not support PNG favicons until version 11. So our first line is a conditional comment for favicons in IE 9 and below:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

To cover the uses of the icon create it at 32x32 pixels. Notice the rel="shortcut icon" for IE to recognize the icon it needs the word shortcut which is not standard. Also we wrap the .icofavicon in a IE conditional comment because Chrome and Safari will use the .ico file if it is present, despite other options available, not what we would like.

The above covers IE up to IE 9. IE 11 accepts PNG favicons, however, IE 10 does not. Also IE 10 does not read conditional comments thus IE 10 won't show a favicon. With IE 11 and Edge available I don't see IE 10 in widespread use, so I ignore this browser.

For the rest of the browsers we are going to use the standard way to cite a favicon:

<link rel="icon" href="path/to/favicon.png">

This icon should be 196x196 pixels in size to cover all devices that may use this icon.

To cover touch icons on mobile devices we are going to use Apple's proprietary way to cite a touch icon:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Using rel="apple-touch-icon-precomposed" will not apply the reflective shine when bookmarked on iOS. To have iOS apply the shine use rel="apple-touch-icon". This icon should be sized to 180x180 pixels as that is the current size recommend by Apple for the latest iPhones and iPads. I have read Blackberry will also use rel="apple-touch-icon-precomposed".

As a note: Chrome for Android states:

The apple-touch-* are deprecated, and will be supported only for a short time. (Written as of beta for m31 of Chrome).

Custom Tiles for IE 11+ on Windows 8.1+

IE 11+ on Windows 8.1+ does offer a way to create pinned tiles for your site.

Microsoft recommends creating a few tiles at the following size:

Small: 128 x 128

Medium: 270 x 270

Wide: 558 x 270

Large: 558 x 558

These should be transparent images as we will define a color background next.

Once these images are created you should create an xml file called browserconfig.xml with the following code:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
 <msapplication>
 <tile>
 <square70x70logo src="images/smalltile.png"/>
 <square150x150logo src="images/mediumtile.png"/>
 <wide310x150logo src="images/widetile.png"/>
 <square310x310logo src="images/largetile.png"/>
 <TileColor>#009900</TileColor>
 </tile>
 </msapplication>
</browserconfig>

Save this xml file in the root of your site. When a site is pinned IE will look for this file. If you want to name the xml file something different or have it in a different location add this meta tag to the head:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

For additional information on IE 11+ custom tiles and using the XML file visit Microsoft's website.

Putting it all together:

To put it all together the above code would look like this:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Windows Phone Live Tiles

If a user is using a Windows Phone they can pin a website to the start screen of their phone. Unfortunately, when they do this it displays a screenshot of your phone, not a favicon (not even the MS specific code referenced above). To make a "Live Tile" for Windows Phone Users for your website one must use the following code:

Here are detailed instructions from Microsoft but here is a synopsis:

Step 1

Create a square image for your website, to support hi-res screens create it at 768x768 pixels in size.

Step 2

Add a hidden overlay of this image. Here is example code from Microsoft:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
 <img src="customtile.png" width="320" height="320" />
 <div style='margin-top: 40px'>
 Add text/graphic asking user to pin to start using the menu...
 </div>
</div>

Step 3

You then can add thew following line to add a pin to start link:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Microsoft recommends that you detect windows phone and only show that link to those users since it won't work for other users.

Step 4

Next you add some JS to toggle the overlay visibility

<script>
function ToggleTileOverlay() {
 var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>

Note on Sizes

I am using one size as every browser will scale down the image as necessary. I could add more HTML to specify multiple sizes if desired for those with a lower bandwidth but I am already compressing the PNG files heavily using TinyPNG and I find this unnecessary for my purposes. Also, according to philippe_b's answer Chrome and Firefox have bugs that cause the browser to load all sizes of icons. Using one large icon may be better than multiple smaller ones because of this.

Changing website favicon dynamically

I have a web application that's branded according to the user that's currently logged in. I'd like to change the favicon of the page to be the logo of the private label, but I'm unable to find any code or any examples of how to do this. Has anybody successfully done this before?

I'm picturing having a dozen icons in a folder, and the reference to which favicon.ico file to use is just generated dynamically along with the HTML page. Thoughts?

Isn't it silly that a tiny favicon requires yet another HTTP request? How to make favicon go into a sprite?

A minor improvement to @yc's answer is injecting the base64-encoded favicon from a JavaScript file that would normally be used and cached anyway, and also suppressing the standard browser behavior of requesting favicon.ico by feeding it a data URI in the relevant meta tag.

This technique avoids the extra http request and is confirmed to work in recent versions of Chrome, Firefox and Opera on Windows 7. However it doesn't appear to work in Internet Explorer 9 at least.

Favicon dimensions?

The favicon is supposed to be a set of 16x16, 32x32 and 48x48 pictures in ICO format. ICO format is different than PNG. Non-square pictures are not supported.

To generate the favicon, for many reasons explained below, I advise you to use this favicon generator. Full disclosure: I'm the author of this site.

Long, comprehensive answer

Favicon must be square. Desktop browsers and Apple iOS do not support non-square icons.

The favicon is supported by several files:

In order to get the best results across desktop browsers (Windows/IE, MacOS/Safari, etc.), you need to combine both types of icons.

favicon.ico

Although all desktop browsers can deal with this icon, it is primarily for older version of IE.

The ICO format is different of the PNG format. This point is tricky because some browsers are smart enough to process a PNG picture correctly, even when it was wrongly renamed with an ICO extension.

An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico. For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.

Declare the favicon with:

<link rel="icon" href="/path/to/icons/favicon.ico">

However, it is recommended to place favicon.ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons.

PNG icons

Modern desktop browsers (IE11, recent versions of Chrome, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible". For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.

What are the recommended sizes? Pick your favorite platforms:

The PNG icons are declared with:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

Beware: Firefox does not support the sizes attribute and uses the last PNG icon it finds. Make sure to declare the 32x32 picture last: it is good enough for Firefox, and that will prevent it from downloading a big picture it does not need.

Also note that Chrome does not support the sizes attribute and tends to load all declared icons. Better not declare too many icons.

Mobile platforms

This question is about desktop favicon so there is no need to delve too much in this topic.

Apple defines touch icon for the iOS platform. iOS does not support non-square icon. It simply rescales non-square pictures to make them square (look for the Kioskea example).

Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon.

Microsoft defines the tile picture and the browserconfig.xml file.

Conclusion

Generating a favicon that works everywhere is quite complex. I advise you to use this favicon generator. Full disclosure: I'm the author of this site.

Use the online Div Table styler for creating grid layout on websites because the traditional HTML tables are outdated and not responsive.