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
