Saturday, October 28, 2006
If you use Blogger or some other service to host your blog or site, then you may have noticed that most of the pages hosted on that domain have the same favicon. By creating your own unique favicon, visitors can quickly identify which tab is your site instead of seeing, say, the generic "B" favicon that Blogger uses.
Step 1: Either find an image that you like or create one. If you use a stock image, then you'll want to either crop or cut out a 16x16 pixel piece of the image since shrinking a large image down that much won't give you a very good looking favicon. Microsoft Paint can easily do this.
If you want to create your own image, Paint.NET is a good program to use. Many sites use a couple of letters for their favicon so it doesn't have to be very fancy. As an alternative, ImageAuthor is an online Java image editor that combines steps 1 and 2, but it can be a little complicated.
Step 2: To create the favicon, upload your image to a service like favicon generator.
If you want step-by-step instructions, a video tutorial for is available for Favicon from Pics below or here:
Step 3: Upload your favicon to a hosting service like Google Pages or OurMedia. If you use Google Pages, don't name your favicon "favicon.ico" since that'll give you Google's favicon.
Step 4: Finally, place the following HTML code just before the closing </head> tag, replacing the URL with the one belonging to your favicon.
<link rel="shortcut icon" href="http://example.com/favicon.ico" />You're done!
<link rel="icon" href="http://example.com/favicon.ico">
For reference, I found this rather technical article very useful. Strictly for those who want to take a more hands-on approach.