Wasting time with FavIcons or more aptly the Dummies Guide to FavIcons

Do you know what a FavIcon is? 
I do now and I also have one!
See the "q" up on the tab and if you are using mozilla or IE you will see the same "q" on the address bar (it doesn't show on the address bar in chrome - but I *think* I can live with that). I can also see the icon on Safari *doing the happy dance*

I used this tutorial here and here to get me going.

STEP 1: So the first step is to make your 16 X 16 pixel icon.
Basically I made my 'q' in PaintShopPro - a nifty if somewhat basic and simple program, but it asked me straight away what size I wanted my new file to be - 16 pixels by 16 pixels which, in my ignorance, I wouldn't have known how to do with out bothering the in-house IT expert.
Added text, coloured it orange. Save it as a .jpeg file (those choices appear in a drop down box just below where you need to name your saved file). Use any drawing or graphics program that you own, but I only know how to use PaintShopPro - cause I do simple really well!
STEP 2: Then I went onto the steps in the tutorial up to their point 3. This will require you to go to the website of IconJ and follow the neat little steps there too. Apparently if you have your own website you can put it on there yourself (but if you have your own website then you already know much more than I do!)
STEP 3: Only do this if you are happy to play around with the html of your blog. You should download a copy of your blog to re-upload if you make a complete hash of the code.
Use the tutorial's instructions for point 4 if you use the old blogger.
This is where I came unstuck because I use the new template of blogger.
It took some trial and error to work out where to put the two lines of code.
So if you use the new blogger go to the DESIGN tab and Edit HTML *see previous warning*
It still has to go under the place that has the command < head > however, it must go a few lines further down. You need to paste your code twice into the HTML just ABOVE the lines of code that read:

< title >< data:blog.pageTitle/ >< /title > 

IMPORTANT NOTE: I HAVE PUT spaces BETWEEN THE THESE ARROWHEAD CHARACTERS "<" AND THE WORDS. DO NOT PUT IN ANY SPACES. The reason I put in the spaces is so that the line will show in this post, otherwise blogger thinks I am writing HTML and I am sorry blogger but that is the joke of the century!!! I just copy and paste and look like I know what I'm doing!
STEP 4: After you have pasted it in TWICE you need to find one of the parts that say

 "shortcut icon" (it will be there twice because you pasted it in twice - didn't you?)

You need to delete one instance of the word shortcut so that the word icon is right up against those inverted comma marks "icon" just like that back there.

I can hear you asking why? Well the reason (she says sounding knowledgable but parroting something she read) is one line of code puts your little icon on the tab of the browser and the other puts it on the line of the address bar (I have no idea which is used for which, but it works - well except for Google chrome which only puts it on the tab - hey google chrome what's with that anyway?- I wan't to look at my handiwork especially in the address bar).

The picture below is a screenshot to show what my html page looks like after I've pasted in the code that I got from the hosting site...

Click on the shot to get a larger view. The highlighted code is what I pasted in TWICE!

So there you have it. Hope I've made it easy for you to do it too.

You should go and thank Oikology 101 because this was never going to happen without her tutorial

Hmmmm...I might go and see if I can make my 'q' a little less fuzzy now...*time waster alert*

*The only thing I wonder about is if the hosting site goes I may lose the icon, but I guess the same applies if you use different blog backgrounds etc so I won't lose any sleep over that thought.

thanks for taking a peek over the fence...