I’ll start by explaining what a Favicon is and why it’s helpful when trying to “brand” your blog or website. Go over to my Caribbean Cooking Blog, now bookmark the site (add to favourites) then take a look at your bookmarks and you should see a red pepper next to the bookmark you just created. Additionally, while at the site take a look at the top left side of the page (I’m using a FireFox browser). You’ll see the same red pepper in front of the URL in the destination bar as well (see image below).

Basically a favicon is  a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up. Usually it’s an image (could be your logo) that reflects the site in some way. It is a great way to brand your site and increase it’s prominence in your visitor’s bookmark menu. I’ve come to the point now where I now identify my bookmarks by the favicons that appear in my bookmark list. Basically any bookmark that has a favicon installed gets my attention when I go through my list.

As you know I’m not a programmer and I try my best to keep away from doing anything that could have consequences when it comes to playing around with files on my server. I’m quite comfortable paying someone to do such things, as I know my time is worth more than what I’d pay someone who’s skilled in the field. I’m a firm believer in outsourcing rather than learning, since I know the value of my time. This time it was a bit different though… creating and installing a favicon is very simple.

Here’s how to create and install a favicon on your website to help with the overall branding of your business.

Go to: http://tools.dynamicdrive.com/favicon/

Select an image from your flies that reflects your website. It can be your logo. In my case I used a Scotch Bonnet pepper, since it’s used heavily in Caribbean cuisine.

Now follow along with the instructions for creating the actual favicon.

The final step is to upload the image to your website and changing a little code on your index page.

1.  Upload the generated file (“favicon.ico”) to your site. Verify it’s there by typing http://mysite.com/favicon.ico in the browser’s location, where “mysite.com” is your site’s address.

2. Next, insert the below code in the HEAD section of your pages, at the very least, your site’s main index page:

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

3. That’s it! Note that your favicon may not appear immediately after you’ve completed the above two steps. In fact, it may take a few days, and in IE, sometimes the favicon will disappear from time to time due to a browser bug.

Hey, if I can do this Im sure you’ll find this very simple as well. I assure you that this will help tremendously with your company’s branding.