Don't Forget Your Website's Icon

Many times new clients worry and fret about their website's look and feel, but completely ignore one very small, but vital, tidbit: their website's icon.

This is a very tiny (16-pixel square) picture that sits beside your website's name in the browser's address bar:

and the browser window's tabs. 

It also gets saved when your website is bookmarked by the user.  So when a user quickly glances down the list of bookmarks, they can visually pick out the right icon (tiny picture) rather than trying to read the actual words of the name.

I, personally, find a website's icon most useful in the browser I most use, Firefox, because I can define a "bookmark toolbar" at the top of my browser page, and if I use only the website's icon, or the icon and a couple words or letters, I can fit more bookmarks on the toolbar.

As you can see, this website icon is a very useful thing, so you need to ponder what your website's icon should be.

When you are thinking about your icon, keep in mind that it is only 16-pixels square... or 16-very-small-squares-of-color square.  Here is a 16X16 block of tiny squares:

But in reality, you only have this much space to work with:

So it can't be anything complicated that needs to be clear in order to be recognizable. 

As you can see from the above toolbar image, the icon I used for the website labeled "JkP" is an impression of something vaguely purple/white/green.

The end-user wouldn't know that the icon was supposed to be an iris, which is the picture I use as the logo of the website, unless they really paid attention.

Which is okay with me, because I was after a unique image that was the same general color of the website, rather than a specific/clear image.

Here's a blown-up version of the icon, so you can see how vague it truly is.

And here's the PowersWebDesigns icon actual and blown up.

So, don't forget to ponder your website's icon, while you are pondering the rest of the look and feel of your website.

-----------------------------------------

Now, for the technical bit:

The icon needs to be of file-type "ico", which doesn't come as default in Photoshop (at least not in CS3) and some other programs.  You can get an add-on for Photoshop to create an ICO file from here: http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html