How to have multiple favicon sizes, yet serve only a 16x16 by default?

Question

Generally it is considered good practice to serve favicon.ico in multiple sizes, because that way it looks better when a shortcut is made or the site is pinned (IE9). The size of a favicon easily increases tenfold by doing so though, which results in slower site loading (in my case the 16x16 favicon is 1kb, the 16, 32, 64=30kb).

Sites like Facebook and Yahoo serve a 16x16 favicon by default that is <1kb, but when you pin these sites, the image used is proper size. I assume the larger picture is loaded only when needed, which fixes the dilemma. I have unsuccessfully been trying to figure out how these sites do this. Does anybody know this?

Answer 1

Update:

My original answer is below, however, since writing this post I believe there may be a better way to handle Favicons with HTML 5. I would create a 32x32 favicon (only that size) for Internet Explorer 9 and below but use other methods for creating higher resolution favicons (PNG file type) for other browsers including mobile devices. You can see my answer here for additional information.

---

Original Answer to Question:

Here is how it can be done:

1. Download png2ico. Extract to c:\

2. Create your Icons in your favorite program. Create a 64x64, 32x32, 16x16. (Note: 64x64 is probably not needed and will increase file size. However, use at least 32x32 and 16x16) Save as icon-64.png (for 64x64 size) icon-32.png (32x32) and icon-16.png (16x16) in the same folder as png2ico. Keep the colors to a minimum.

3. Open Command Prompt - Change directories to the png2ico folder. (cd \png2ico)

4. Once in the right directory run this command:

   png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png
   

   Note: The difference in file size for the addition of a 64x64 size icon increased the file by 2kb. I would just use 32x32 and 16x16. (Run same code as above removing icon-64.png)

5. Grab the favicon.ico file from the png2ico folder. Upload it to the server add <link rel="shortcut icon" href="http://example.com/favicon.ico" /> to the header and you are good to go.

While you are at it go ahead and create Icons for iPad and iPhone. You can find more info on recommended sizes here and how to implement them into your site.

Also more general info on Favicons can be found here.

Note: I do not know if this is how Facebook or Yahoo do theirs but this answers your question of how it can be done.