Favicons are those little icon images you see on the web address bar, next to the sites on your favorites list, and on the tabs of the websites on your browser. Here’s a tutorial for creating your own custom Favicon so when people come to your blog or bookmark it they’ll see you took a little extra time to personal it.

Step 1: Decide what image you want to use. It can be of a person, an animal, a letter, or something that will remind people of you. Make sure the image is crisp and clear. You’ll find later on that some don’t work well when they are really little. Square pictures work the best. Once you’ve decided on your image make sure you have a copy of it on your computer as you will need to upload it in the next step.

Step 2: Upload your image to a Favicon maker site. I used Dynamic Favicon for Blogger and Webmaster as it was the easiest to use. Click on Browse and find the image location on your computer. Click Upload It. (see photo below)

It takes just a few seconds for the favicon to be generated. You will see what it looks like at the top of the screen. If it’s not clear what is in the picture then you need to try a different one. Just click on Redo Again at the bottom of the gray box and upload a different image.

Step 3: When your image has successfully uploaded you’ll need to copy the direct link html code (see photo below).

Now go to your blog’s html template (under layout). You need to find the following code in the template.

]]></b:skin>

The easiest way to do this is to hit Ctrl F and the find box will come up, usually at the bottom of your screen. Type in the word skin. Hit the next button. It should be the 2nd “skin” that comes up. Paste the direct link html code right after this in your template. (see photo below)

Hit save. View your blog. If done right you should see your favicon in the web address bar and on the tab for your blog page.

I’d love to see your favicon if you decide to make one. Leave a comment so I can find you!

© 2007-2009 Chocolate on my Cranium, LLC all rights reserved