How To Personalize And Distinguish Your Web Site From Others

If you bookmark a page with Microsoft IE you will notice some sites have a special icon associated with their respective bookmark thus differentiating or branding site A from site B. Think of it as internet marketing.

It dawned on me recently how easy it was for me to locate web sites that I had bookmarked and appeared in My Favorites menu with a little icon displayed next to the web site name, so I decided to find out if I could put one on my own web site to make it stand out in the My Favorites menu and easier for whoever bookmarked my site to locate.

I started my search on Google and discovered that the little icon that replaces the IE logo (in IE) is called a Favicon”(pronounced fav-eye-con) and is short for Favorites Icon or it is sometimes called a bookmark icon.  The Favicon also shows in the address bar as well.  Notice the red Y! symbol that appears in the left-most area of the address bar in Internet Explorer when you open Yahoo!, or the butterfly in MSN .  What a great way to personalise your site. 

You will require IE 5.0 or higher and a favicon.ico can show up in at least three different places in Windows:

1) In the Favorites list selectable on the Start menu;

2) In the location bar of the browser when you are visiting the web site;

3) On your desktop if you first bookmark the site, click Start, Favorites, hold down the control key and click on the bookmark to drag it to the desktop (it copies the icon as a shortcut).

The favicon.ico can also show up in the following two places:

4) On the taskbar if you bookmark the site, hold down the control key, then right click on the bookmark and drag it to the task bar, it copies the icon there;

5) On the links bar if you bookmark the site, hold down the control key, then right click on the bookmark and drag it to the Links tool bar, it copies the icon there.

If you search in the engines for favicon you will find that many sites come up offering favicon tutorials, online tools to create favicon icons, free favicon icons and installation instructions too.A favicon should be 16 X 16 pixels with 16 colors and the file name must be favicon.ico and ideally you should search for a program that allows you to create favicons online.  Remember, if you do not save it as favicon.ico it will not work. Do not make the mistake of just shrinking an image to icon size and renaming it with a .ico file extension. That will not work either because it is not a real icon file.  Do not be surprised if your own favicon does not  show up in your own browser when you open your site, as sometimes this can take up to a few days and even disappear again only to reappear.

I had fun creating my own personal 16 x 16 pixel image in MyImager and then found a site on Google that created a favicon.ico file and I uploaded my image and clicked on generate favicon and that is how easy it was.   I then uploaded the favicon.ico file to the root web directory, in the same location as the index.html page of my hosted website and bingo, I now have a Favicon and have personalized and distinguished my web site from others. Creating such an icon adds to the professionalism of your site, marking you as a web designer who attends to detail.

So now when someone bookmarks my site with a browser that supports favicons, my favicon will appear, as opposed to a default image (a logo for Internet Explorer), which is used instead if no favicon.ico had been provided.  I am sure if you look through your own Favorites Menu you will notice that the bulk of the images are the IE logo.

The favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser. Often, the favicon reflects the look and feel of the web site or the organization's logo.   Have fun creating your Favicon.