Brand Your Blog With A Favicon

A favicon is the tiny symbol that your browser puts in the space to the left of the webpage address. Ever notice the Blogger icon next to addresses in your blogroll? How could you not! It's a white letter B on orange background. This is part of branding well known websites. Similarly the top ranked blogs have icons so we recognize them in browser windows or favorites list.

All 'blogspot.com' blogs default to the Blogger icon. WordPress also brands its sites hosted on their free blogging platform. It gets boring real soon! But in most cases you can change the default and proudly show your own brand.

Select an image

Of course you want something that reminds the viewer that it's your website. If you already have a logo then that's a good starting point. As you can see, the image must be very small, 16 x 16 pixels to be exact. Most of us don't have anything that small lying around in our picture albums. You can start with something larger and re size it. But remember, a 200 x 400 photo of you will look like this:

Your can use Paint software, which comes free on most pcs or any retail image creation software like Photoshop to create your image. Mr. I. uses IrfanView - a graphic viewer for Windows which you can download for free.

Create your icon file

Icons must have the file type '.ico' --- there is software on your pc or online to convert a regular image into this type of file, sized at 16 x 16. The IrfanView software will easily do this conversion for you. I like the online favicon makers which will take any reasonably sized image and shrink it to the proper file type. You then download the 'favicon.ico' file to your PC.

For my personal blog, I started with a 64 x 64 avatar type image, used this online favicon maker. This is what it spits out for my avatar --- looks a bit better when shown in the browser. So stick with square avatar size images that may scale down properly.

Sample icons

For this blog, we initially used  a dollar sign - letter S - image which was part of our new header as of Jan, 2009.

Our latest re-incarnation matches the three symbol logo of the current header, which will work on any future theme.

Publish your icon

You need to upload your icon to your blog's root directory using the name 'favicon.ico'. For free hosted blogs, none of your uploaded files go into the root directories. So you'll have to create a link in the blog page to the icon. After you have the '.ico' file you need to put in on an image hosting server where any browser can find it. This resource page on OneCoolSite lists many more free image hosting services, including Flickr and PhotoBucket. Then you need to put some html code in the head of your page. Both 'rel' tags are necessary since some browsers look for "icon," while others use "shortcut icon".

• On self-hosted -If you have a WP self-hosted blog, just follow these steps given by Newestonthenet and you're done:"add this code to your header.php folder: <link rel=”shortcut icon” href=”favicon.ico” /> Save your header.php folder then Refresh your browser."

• on Blogger - You need to change your Blogger template to allow browsers to pick up your image. So don't be afraid, it's foolproof. Go to Blogger layout, select Edit HTML. Then make a copy of your template before you make any changes. Do a search for the word "</head> " and insert this code above that line --- of course, first change the code in green to reflect the location where you stored your icon: You can see that url if you look at properties while viewing the icon on your host.<link href='http://l.b5z.net/i/u/6049594/i/blog/bwsfavicon.ico' rel='shortcut icon'/><link href='http://l.b5z.net/i/u/6049594/i/blog/bwsfavicon.ico' rel='icon'/>Then press Preview (not Save) to confirm there are no errors. You should see the new icon in the preview. Then you can save the template! Note that in some versions of IE, you need to first bookmark the site to display the icon.
• On WordPress -  As of 12/2008 is it now possible to do this on the free WP platform! Folks had been pleading for this option for over a year. Here's a quote from a WP forum comment: "http://en.blog.wordpress.com/2008/12/02/go-get-a-blavatar/ solves our problem. I have tried to upload an ".ico" file, that didnt work (silly me hadnt read the "jpg or png only" at the beginning); but the favicon I got from the cropped jpg is a decent one..." Seems it takes a hour or so to appear in browsers.

It's fairly easy to add this touch to your blog, so go for it! Let the world see you putting your brand on the blogosphere, one pixel at a time. This type of recognition may be small (literally) but can help any new blogger on the path to success.  Try to tie the image to your header or custom logo for a coordinated design that will "scream success!"

Tell us if you need help in setting one up, we're here to help each other. Do you have a favicon? If so let us know in the comments below.

photo by dan taylor