Making the Icon

Ourtuts.com had a post containing several resources for making a favicon. The one I liked the best, Favicon Generator, was easy to use and it could embed various sizes in the icon file; best of all, no need for a Photoshop plugin. I would recommended:

1. Size your square image to 48px by 48px in Photoshop.
2. Upload it to the generator.
3. Check the “Merge with a 32x32 desktop icon.” and 48x48 checkboxes.
4. Generate and download. Nice and easy. :-)

Once that is done, you need to place it in the root directory of your website and add this code to at least your home page.

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

If you have previously bookmarked your website, you may have to take these steps to make the new icon appear.

1. Delete all your bookmarks leading to your website.
2. Clear your browser's history, cache and your computer's recycle bin.
3. If necessary, restart your computer.
4. Then, re-bookmark your website or blog and enjoy your new favicon!

Understanding the Favicon

A great resource is the Favicon Cheat Sheet.

Base favicon.ico File

Create your 16x16 and 32x32 icons in the favicon.ico file and place in the root directory.

Touch icon for iOS 2.0+ and Android 2.1+

Create a 152x152 pixel PNG-24 icon then use it as shown here:

<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

IE 10 Metro tile icon (Metro equivalent of apple-touch-icon)

<meta name="msapplication-TileColor" content="#FFFFFF">

<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

Replace #FFFFFF with your desired tile color.