How to create a favicon.ico...

12/26/2010 06:14:00 PM 0 Comments A+ a-

Ok so WHAT IS a favicon.ico? Look up at your address bar.  See that icon to the left of it?  That is called a favicon short for favorite icon.  These show up in tabs, bookmarks, and next to the address bar.  These are handy little tools to help "mark" your website and just give it a little something extra.  Also, I think they are pretty neat in general.  Doing them is a LOT easier than it sounds too.

First off I recommend downloading this 100% free program called Photobie. I have been using this program for a couple years and I have to say, it's pretty amazing for free. And no, I am not getting paid or bribed to say this.  Although maybe I should because I think I tell EVERYONE about it!

Keep in mind that some images just won't look good at 16x16 pixels, which is what a favicon is.

Ok, so you have downloaded photobie (or a program that can do the following). Open your image up in the program then go to file>save as and name it favicon and instead of gif or jpg pic the ico extension.  Make sure this has NO CAPS.  Go to your websites file directory and upload the file in the documents section, not the images section.  I use Microsoft Live Web as my directory because it is free and you have a great amount of free space available.

Once it is uploaded to your site of choice it should look something like this: http://jocelynbrown.web.officelive.com/Documents/favicon.ico

Now in your html code find /head and RIGHT ABOVE IT put this code :
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

Now preview your page and it SHOULD be there.  I have had some problems with some webpages refusing to acknowledge the icon and some read it no problem.  When this happens I usually google the issue I am having and an answer pops right up!  Hopefully this helps!


I love hearing from you!