How to create a Favicon
Firstly you need to create the little .ico file that will be used on your site. I have a favourite online site that I use for simple text favicons and that is what we will use today. Of course you can also create your own graphic and use that instead.

Have entered the words, just need to add the colors

Now with the colorzilla firefox plugin it is just a matter of hovering the mouse over a color on your page and it will tell you the html code for it - very cool tool. Once I have added the colors it is now time to download the favicon.ico file and I will just save it on my desktop for now. It is important to rename the file before or after you save it otherwise it will not work on some sites that already have a favicon.ico file. I am going to call mine onemill.ico

Applying the color combinations to the favicon.

Ok if you have followed the process so far you now have a little ico file saved on your computer. Now there are two sets of instructions, first set is for those with a regular hosted website where they can upload this file via ftp to their site.

Regular Website or Blog - Hosted on your own Domain
Using your ftp or file transfer program transfer the favicon.ico file to the root directory. Now on every page that you wish the favicon to show (normally included in the header file for your pages) add the following code. This should be directly after the head tag. (favicon.ico should be replaced with whatever you called your ico file. If it is your own domain the name favicon.ico may also work ok.

Blogger/Blogspot Hosted Blog
If you have a blogspot blog like I do we need to first find a home to host our favicon icon. I use the http://pages.google.com option because its free fast and easy. Head to the site manager and upload your favicon. My address for my favicon is http://robstgeorge.googlepages.com/onemill.ico . Now we need to dig into our Blog template and add the code that will point to this file that we have uploaded.

If you prefer to cut and paste here it is, however you will need to remove the spaces around the <> signs.

< href="'http://robstgeorge.googlepages.com/onemill.ico'" rel="'shortcut">
< href="'http://robstgeorge.googlepages.com/onemill.ico'" rel="'icon'/">

Now after you saved that you can refresh your browser and chances are you may not yet see it! Favicons are funny things and if a new visitor arrives at your site, they will see it, however you may need to remove any bookmarks you have to the site and clear any caching of temporary internet files before you can see it. You may want to try it on another computer or another browser just to check your work.

The finished sample...

I hope you found this tutorial of value, please feel free to link to it if you would like to share it with the readers of your blog. You can subscribe with the link below if you would like regular articles like this sent direct to your email account.

Subscribe by Email to the Million Dollar Experiment Down Under

1. Mike's Money Making Mission
2. Kumiko's Cash Quest
3. How to earn money online?
4. Stratz's Blog
5. Hot Blog Girls

Job Search Australia
Job Search New Zealand