« Home | Pluck 2003-2006, R.I.P. » | Google Apologizes for Blogger Outages » | Cellphedia: Mobile Social Encyclopedia » | Jawed Karim on How YouTube Got Viral » | Search Multiple Bittorrent Trackers with FullTorrent » | 3 Minutes » | Google to Enter the IPTV Arena? » | Watch TV from 9 Countries Online with TV Bistro » | Look like you're being Productive to your Boss wit... » | Search for Famous Quotes with Quotiki »

Saturday, October 28, 2006

How to: Create a Favicon for your Blog or Site

Sharp-eyed readers will notice that Digital Alchemy is now sporting a brand spanking new favicon. For those who don't know, a favicon is just a small 16x16 pixel image that is displayed next to the URL in the address bar.

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" />
<link rel="icon" href="http://example.com/favicon.ico">
You're done!

For reference, I found this rather technical article very useful. Strictly for those who want to take a more hands-on approach.


Send to a Friend!       Subscribe!      

    Stumble Upon Toolbar    

Comment Archive

Reader Comments:

Your favicon is somewhat ugly, as it is square, for starters, virtually unrecognizable as anything other than a discolored glob. But better than nothing. If you want some hints to spritz it up and maybe animate it, check out http://www.cathetel.com/favicon.htm . Unless you like it the way it is.

Previous Posts

« Home