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

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 32×32 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 64×64, 32×32, 16×16. (Note: 64×64 is probably not needed and will increase file size. However, use at least 32×32 and 16×16) Save as icon-64.png (for 64×64 size) icon-32.png (32×32) and icon-16.png (16×16) 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 64×64 size icon increased the file by 2kb. I would just use 32×32 and 16×16. (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.