February 15, 2008

Build Your Own Favicon for Blogger

After some serious frustration, trial-and-error, and getting bad information from a bunch of different blogs and "how to" sites I finally figured out how to implement a favicon for my Blogger blogs. For those of you that want to do the same, here are the steps.

This screenshot curtiousy of Jason Ungos

1. First you have to create an image file that is no more than 16x16 pixels. I did this using Photoshop Elements, but you could use any program. If you already have an icon or picture you want to use, just resize it using your standard photo editing software (iPhoto or Windows Picture Viewer can do this).

2. Second you need to create either a .ico, .gif, or .png file. I used a .ico file by downloading IcoMaker for Mac. Works beautifully. Supposedly you don't have to use a .ico file, but if using a .gif or .png file doesn't work then go ahead and use a .ico.

3. Once you have the file you need to host it somewhere. If you have a hosting site, just post it up there. I use Tripod to host my files. It is FREE, secure, and doesn't require you to download a separate FTP client.

4. Once you have it on the web copy the location of the file and paste it into your text editor software (Notepad or TextEdit).

5. Log into blogger and click on "Layout". Click on the "Edit HTML" area and it will bring up your html code. Search for in the html text. Enter the following code right below it. My looks like this.




If you are using a .gif or .png file it should read like this






6. Click "Save Template"

Hope you get it to work with more success than I first did.

7 comments:

Andy said...

I love favicons. My suggestion is to use something simple, and plain, instead of something graphic--graphics require too much detail, and that doesnt come across well in a fav. Check out the fav at capcontest.com

Andy said...

cool site by the way:
http://www.angryalien.com/

Andy said...

another easy way to make a fav

http://www.chami.com/html-kit/services/favicon/

Andy said...

2 other tidbits, if you want a transparent background:

http://design.peerplink.com/2008/01/10/how-to-create-a-favicon-with-a-transparent-background/

http://tools.dynamicdrive.com/favic
on/

Anonymous said...
This comment has been removed by the author.
Anonymous said...

i couldn't post my favicon file to tripod. could u help me how?

Anonymous said...

i already done those. but seem not work!
the blogger pavicon still appear.
could you tell me why.