Tutorial on How to Change Your Blog's Favicon or Bookmark Icon

Tuesday, March 23, 2010

Another blogger asked me if I can post a step by step tutorial on how to change the favicon or favorite icon that appears when we visit or bookmark a site. As this seems to be a fairly simple blogger hack I'm going to share it with all of you. But first things first, you must have an image file of your logo ready. Your image file can be a PNG, JPG, GIF or even ICO. Preferably it should be square or else it will look squished or stretched when your browser renders it. Another must have is a place to upload and host your image file. If you don't have one try Photobucket it's what I've been using for this blog. If you have those two things ready we can go ahead and start. So take the jump and start hacking that blogger favicon.

In this tutorial we will assume that you know how to login to blogger and go to edit html. Just in case you don't know how to get there, here's an image to guide you.

Now before anything else please back up your template by clicking on "Download Full Template". Just in case you mess everything up at least there's a quick way to get everything back.

With your template backed up here's what you need to do. Look for this code:

If you're using a JPG file for your logo paste this code under the code we found.

If you're using a PNG file use this instead.

If you went for a GIF file here's what you need.

Here's the one for ICO files.

Now all you have to do is replace the "YOUR IMAGE LINK/URL" with the link of your image file. Once that's done go ahead and save your template. Now when you and your readers view your blog your logo will appear on the address bar next to your site's URL. One thing to note though, this hack doesn't seem to work on Internet Explorer, maybe that's why it's called a "Dead Horse". I hope you enjoyed this simple hack and please let us know how it worked for you in the comments.

Posted by Jab Escutin


Ken Wooi said...

i never knew other image format can be used.. all along i thought just .icon format.. thanks for sharing =)

jab said...

that's what i thought too... good thing i got lazy and didn't make an ICO file... =)