What exactly is a Favicon?

The word itself is a combination of two words. Favorite and Icon. The purpose of a Favicon is to serve as the little picture thingy that shows up in the navigation bar and tab of your browser. It can be any 16 pixel by 16 pixel image in either .jpg, .gif format with an .ico extension.

So what’s the point you may be asking?

Well, the point is that it’s another step in marketing and branding your site. In most cases, the favicon is a company or site’s logo. It also is used by many browsers as the icon for a site when you bookmark it in your browser. It makes (hopefully) your site recognizable by associating an image with the site.

How do you make an favicon?

You can very easily create a favicon using some image software like Photoshop, Gimp, or Paint. Really, the only restriction is that when you’re done, it should be a 16X16 image. The image must be saved in the .ico format, so just renaming a .jpg or .gif file will not work. It also must be in the 16 colors palette. Don’t worry though, you can still use your graphics program to create one even if it doesn’t do the .ico format.

I suggest you try to create the image in a 64×64 size first as working in a 16×16 canvas can be a bit… restrictive. Try to make the image something recognizable and something that can easily be related to your site. Once you’ve done that, try shrinking it down to the 16×16 size and make sure that it is still recognizable at that resolution. If it’s not, go back to work.

Once you’ve gotten your icon created, you’ll need to make it into a .ico file if it isn’t already. Again, don’t just try and rename it. It won’t work. The easiest way I’ve found to create a favicon from an image in another file type is by using the favicon from pics site. It’s pretty easy to use. You just browse for the file you want to convert and then click the convert Favicon.ico button. They do give you the option of creating an animated favicon, but I personally don’t like them. Feel free to experiment however. Once the favicon is created, you should be presented with a preview and a download link. Download the file.

You’ve created the file, now what?

Once you’ve created the file or downloaded the converted file from Favicon from Pics, you need to get it on your server. Yes, you have to have a server for it. If you’re using a free blog hosting service like blogger or wordpress.com, you’re out of luck. You’ll need access to your hosting server and they just don’t allow that.  ADDED: I’ve confirmed that you can use a favicon on blogger, but you’ll still need a host to host the .ico file.  Instructions are in the comments.  Thanks SarahG!

You’ll need to ftp the file to your host server. You can do this with your favorite ftp software or some hosts offer a web ftp service for your hosting account. Ftp the file to the root ( usually the same folder as index.php or index.html) of your site. Once there, you need to add some code to your header. Add <link rel=”shortcut icon” href=”/favicon.ico” /> somewhere before the < / head > tag in your header.

Open up your browser and navigate to the site you just uploaded the icon file to. You should see the icon in your navigation bar now. If you don’t, double check that you put the file in the right place. You also might try deleting your cookies and temporary files as some browsers have a problem with their cache and displaying the icon.

Technorati Tags: favicon, icon, bookmark, marketing, how to, howto