How to add a Favicon to your Website or Blog ~ Make Money Fast - The Million Dollar Experiment Down Under

Tuesday, April 24, 2007

How to add a Favicon to your Website or Blog

Have you ever seen the little icons that some sites have in the address bar and wished that you could have one for your website or Blog? Well now you can. This article will explain how to create a Favicon easily online and how to add it to your website or Blog. We also have a special set of instructions for Blogspot (Blogger) blogs.

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.

Head to the site Favicon Generator and enter the text or initials that you would like to use. Of course space is an issue however for our favicon we are going to use One at the top and Mill at the bottom. For the border and the background we will use the colours from this blog. (to get the colours from your website or blog it is very simple if you use the colorzilla plugin for Firefox. )

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

5 comments:

Anonymous said...

Thanks Biby, its appreciated. Hope to see you back soon.

Rob

Maria said...

Hi Rob, I just recently stumbled across the 'Technorati Train' and wanted to fave your blog. Would you mind leaving a comment with your Technorati link so I can do so? Thanks a bunch.

- Maria

The Making of an Internet Entrepreneur: Improve your Technorati ranking

UltraMint said...

thx rob for good posting. I was really looking for a post about favicon for blogspot. //I got 2 blogs and I want to test your favicon for one of my blog. I copied and pasted your code to my 'edit html' but I don't know where should I put this exactly. I pasted above [head] and error message popped up. Cud
u plz tell me exact location in 'edit html'??

Anonymous said...

UltraMint: Paste it just below the < head > comment

Thanks for calling by, let me know how you go

Rob

John said...

How can I add a favicon to my googlepages url?