Favi...what? (Favicon)

As you are catching a wave on that wonderful world wide web, you might have noticed a little something extra in the URL box. Was it Santa? Maybe the Easter bunny? Nope, it is what is called a "favicon" short for "Favorites Icon"  and you will see it showing up in two places, in the URL window, and also in your bookmarks or favorites list. It is that little visual reminder that you have the right site.

Like this:

 

Here are some that you may be familiar with:

 

So, how do I get one of my very own? There are a number of ways, and I believe several software options that will allow you to create favicons which have their own file format ".ico" and are 16x16 pixels.

If you own Photoshop you can download a plug-in at Telegraphics that allows you to save a file from Photoshop to the ico format. If you don't own Photoshop, Google "Favicon" and you will be bombarded with options.

IMPORTANT: Install the plug-in before you begin.

Next, you are going to want to think about what you can include in your favicon. 16x16 pixels doesn't give you a lot of real estate to play with, so if you have a complex logo you may want to think about using just a portion of it, or if you have a graphic mark, just including that. For this site, I played with a number of options. I tried some chocolate photos that I had taken, and other configurations of letters/words, and landed on just using a simple "B."

Abide the KISS (keep it super simple) method is the best strategy. Contrast is good here, and simple shapes are best.

Lets start with your content in a 64x64 box as such:

Now, because I am using a type element, I have the option to adjust the sharpness of the type and "sharp" gave me the strongest line and letter definition. (upper right hand of image above, note the dropdown after type size) It is just going to depend on the letterform and contrast of the background. There are a couple of different options you can try including "Crisp, Strong, Smooth and Sharp." I would recommend adjusting them and then using your "control + minus" keys to reduce it to actual size to get a feel of which will show up best.

You can also place an image or your logo, but remember you may need to crop in on a portion of it so that when reduced, you can still make out what the image is.

Now, when you think you have everything in place, lets resize the image to the 16x16 final size. Here too, you have some options.

 You may need to do some experimentation to determine which will produce the sharpest image for you.

Now, you have a 16x16 pixel image, and it looks great, now what? Hang in there, we are almost done...

Save the file out as an .ico image, under the "File" menu, go to "Save As" and in the file format dropdown, you will see you have a variety of options including the "ico" format. Now, make sure the file name you are using is "favicon.ico" this is important.

If ICO does not appear in your dropdown, double check that you have downloaded the format from the link provided above and that the plug-in is located in the "file format" folder within Photoshop. 

So with 16x16 ico format file named "favicon.ico" lets go to the web. Connect to the server hosting your site and upload the file in the same directory as your home (index) page making sure that it isn't falling into any subfolder.

Now lets test it, a couple of things you need to consider is that Windows browsers may not display the icon until it is saved as a "favorite" and macs may need to have the cache cleared before it will appear.  

Here is a site that showcases a number of favicons: http://deltatangobravo.com/archives/2004/march/favourite 

Good luck and if you have a favorite site with a great icon, share it with us by clicking on the  "post a comment" button below.

Happy Faviconning!