The Magic Of Favicons

Have you ever visited a blog or a website and seen a tiny image in the web address bar? Have you ever wondered how-in-the-world folks did that? Well if you did I am here to tell you that you too can have your very own... Favicon icon. Yes, that is what those little images in the address bars are called.

And to help make things a little easier I will share in this post where I went and what I did to accomplish the making and publishing of a favicon icon.


Step one. First, I thought about what image I wanted to use as my favicon. You can make one in Photoshop, or you can use photos.

Step two. Once I figured out what I would use my next step was to turn my image into an .ico file. For this I found Favicon from Pics. Go visit this site. Its quick, its free, and most importantly... it works!

Step three. Now here is where things got tricky. Why? Because Blogger will not let you just type in your favicon icon into the html. You have to upload your favicon somewhere online first. That was my biggest problem. Where could I go to upload when most places online don't allow .ico files?
Well, I finally found a solution when I visited a great blog called, " Tips for New Bloggers." I did a search in this blog for Favicon icon and found what I was missing! It was suggested that folks find a free host like Google Page Creator. This was also free. So I uploaded my favicon into my own space in Google and found the url address for my little .ico file. Now I was in business!

Step four. Once the uploading was complete I revised my blog's html. Basically, I went to the top of my html code and looked under this:
< head >Next I found this: < title>< data:blog.pageTitle/>< /title>

It was the second " sentence" down from the < head> opening tag.

Then I typed in the following: < link href='http://MY ADDRESS/MY FAVICON ICON FILE' rel='shortcut icon'/> And that was it!

Of course the final html code I wrote above is just an example. If you type it in your html put your own web file address instead of MY ADDRESS and exchange MY FAVICON FILE for the url address of your icon. But if you're still a little confused do visit Tips For New Bloggers. They do a great job of detailing the steps.