Logo in the Browsers Address Bar - Favicon


Logo in the Browsers Address Bar - Favicon

 by: Michael J Medeiros

Several people have asked me about logo branding with an image that appears in a users address bar. While I personally removed the Favorite Icon from most of my hosts (In the process of creating a more presentable graphic), it is an important factor for establishing a branding for your Website. There are primarily two benefits achieved with using a favicon.

The most prominent benefit is when a user bookmarks a page within the Website, the Favorite Icon will appear next to the bookmark. This provides a professional and unique appearance within the users computer that will make a supporting website standout from the cluster of links on his or her computer.

Another benefit is the appearance of the icon within a users address bar. This adds to charisma of a Website. Once again, the user should have a memorable visit from a professional and unique browsing experience. The address bar icon rarely changes from Website to Website. Because of this, a small logo will definitely be noticeable to users of a Website.

What is Favicon?

A favorites icon (favicon) is a simple 16x16 or 32x32 pixel image, using 16 colors, that is named favicon.ico and uploaded into a websites root directory. The image will automatically appear within bookmarks on a computer. Additionally, a simple call tag can be added to pages within a Website to make the same image appear within a Browser's address bar.

How to use Favicon on a Website

Understand that some browsers will not support the image. However, this will not effect the browsing experience of users that can not support the favicon.ico image. Additionally, certain hosting services may not allow the use of a favorites icon, although this is fairly rare. It is commonly believed that browsers older than ie5 will not support the image in the address bar.

Simply open an image editor and create a 16 color 16x16 or 32x32 image. It is recommended that colors similar to the Sites theme are used, for obvious reasons. When a suitable image is decided upon, save the file as favicon.ico. Open the preferred ftp software used and upload the file to the root directory of the Website.

Once a unique image is created and residing within the root directory of the Website, add this simple tag head the head tags of pages the icon should appear:

<link rel"shortcut icon" href"url to /favicon.ico" type"image/x-icon" />.

The icon can reside in any directory and be called upon with this tag. In contrast, for the icon to appear as the site logo within a users favorites, it must reside in the root directory.

I Uploaded the Icon, It's Not Working

Nearly 100% of the times this is done, the icon will not appear right away. Clear the Browsers memory, and refresh the page in question. It may take three or for refreshes for the image to appear, if certain elements of the Webpage are stored within the temporary internet files on a computer.

If the icon still fails to appear, double check the location, name, size, and the tag being included within the pages.

I'll see your logo in my address bar ;)