Article in Web Design

Have you ever opened your browser and seen a little icon on the top left hand corner of a website that corresponds to the site you're viewing? For example, when you pull up Amazon.com, do you see that little "a" with an arrow and black background? That, my friend, is a favicon, otherwise known as a website icon, and is associated specifically with a particular web page.

A favicon is easy to make and is an important part of branding on your website. Clearly, in Amazon's case, that "a" stands out quite strongly and everyone knows it is associated with the Amazon brand. If I open a tab, it helps me remember exactly what I'm looking for (in the sea of tabs that I have open), so having a favicon (over a blank page which is the default) is almost essential. It builds recognition and strengthens your brand in the eyes of your users and visitors. It also makes your site easy to locate now that web browsers have started to support favicons. Additionally, they appear in bookmarks, internet shortcuts, and more.

How does the favicon work? Well, to put it simply, it's not JUST a .gif file that you change the extension to within your file manager. You're going to want to use a tool online (or offline) to convert the file (which is 16 x 16 pixels) into a format readable by your browser. I'll go into the testing in a moment, but here's how you do it.

One of my favorite tools to generate a Favicon easily is the Favicon from Pics tool on Chami.com. You upload the source image (GIF, JPG, or PNG), and it will create the favicon format for you. The cool thing is that this tool doesn't force you to upload a 16x16 image; you can upload as large an image as you want, but be advised that it will be compressed HEAVILY. That said, you probably want to create a 16x16 image in a photo or image editor first.

If you don't want to do that, you can create your favicon online. Favicon.cc is a tool that lets you create your brand new favicon or import an image for editing. Plus, if you notice, you can choose from favicons from other users if you wish.

Once your favicon is created and you're sure it's a proper .ico file, upload the file to the root of your website directory. Then, go to your website: http://www.mydomain.com/favicon.ico. If the image loads, you're good to go. If not, make sure you convert it properly.

After you're certain that it is working, all you need to do is add a line of text to your website in the HEAD tag. The code is usually something like this:

<link href="favicon.ico" rel="icon" type="image/x-icon" />

What this does is links directly to the relative path of the favicon (your home directory). You can obviously switch this around to the absolute path (link href="http://www.mydomain.com/favicon.ico) if you wish, but it doesn't matter either way.

Once that's set, you're good to go. You've just personalized your site for yourself and made it easier for your userrs to point it out in a crowd. Good work.

by tamar