Perspective Shift

Stepping Stones Toward The Path Of Understanding (Now closed. Some links may be broken, but you can still navigate through the posts. Keep seeking!)

1/15/2009

Adding a Favicon to Your Blogger Blog

Posted by Chris

First of all, what IS a Favicon anyway?

A Favicon is a small symbol that appears next to the URL of the website you are at, and near the title of your website in a tab. They can actually do a lot for your website, despite some others' adverse opinions on the matter. If you are serious about your website you might take making one into consideration. They help brand your site to a certain image, like the Golden Arches for McDonald's.

Making Your Own Favicon:

To make your own favicon you want an image that is clear and distinct. This image is going to be reduced to about 32 X 32, so a big image with a lot going on will prove to be very difficult to make out once it is resized. The image also must be changed into the .ico file type. Once you have your image you can go ahead and reduce the size yourself, or you can go to one of the many free resources out there that will do it for you free of charge. One such website is MyFavatar, who will also host it free of charge, as well as automatically convert it to .ico for you.

I personally prefer using an original image, but there are resources available that offer pre-made favicons. For those who find this more appealing here are a few resources you might be able to put to use:

http://tango.freedesktop.org/Tango_Icon_Library

http://www.exploding-boy.com/2005/09/13/explodingboy-pixel-icons/

http://www.famfamfam.com/lab/icons/silk/preview.php

Using the Favicon

Once you have in mind exactly what image you wish to use, and it's resized, you're going to want to host that image. You can host it on your own server, but if you're using blogger you will have to find free hosting elsewhere. MyFavatar will host it free of charge, Photobucket is a good source, as well as Flickr.

Once uploaded you need to make a small addition to your code. Back-up your template and then go to Layout > Edit Html. Type Ctrl + F and search the code for /head. You can insert the code anywhere between that and "head" but I prefer to do it right before /head, just in case I get an error. Doing this makes it very easy to locate and remove the code if something goes wrong.

Once located copy and paste this code, don't attempt to retype it or you may introduce some new spaces or characters without even knowing it.


Of course change the exampled URL to the one where the favicon is located. Now all that's left is to check to ensure that it's working. Visit your website and see if it's up there, but note that even if it's not showing right away it may still have worked. It can take anywhere from one to three days before it will actually show up, but I usually see it working pretty quickly whenever I alter mine.

2 comments:

  • Jan
     

    Okay, this is really cool. I've always heard about Favicon and I always push it to the back burner. Now, that you've written a clear how to on creating one, I'd just might give this a try. Thanks.

  • Chris
     

    No problem at all :P. It's something that I liked too and It wasn't hard at all so I figured I'd write up how I did it for anyone else who was in my position.

Post a Comment