I have been wondering how the little icon goes into the browser address bar or in the bookmark, and I have recently found the answer. It is called favicon (Favourite Icon), and it is a simple 16×16 or 32×32 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.
What is the benefits of having the icon appearing in the address bar and bookmark? Well, it not only simply provides a professional and unique appearance within the users’ computer, but also adds charisma of a Website and gives a memorable visit for a professional and unique browsing experience, because the address bar does not change from page to page visits in your website.
There are some browsers that don’t support the favourite icon. However, this will not effect the browsing experience of users who can’t see your logo. Additionally, certain hosting services may not allow the use of a favourite 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 16×16 or 32×32 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, I prefer SmartFTP, 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 between the beginning and ending head tags:
.
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 favourites, it must reside in the root directory.
One thing to keep in mind is that nearly 100% of the times this is done, and the icon will not appear right away. Clear the Browsers memory, and refresh the page in question. It may take three or four refreshes for the image to appear, if certain elements of the Webpage are stored within the temporary internet files on a computer, or, try to delete your temporary internet files before refreshing the page.
If the icon still fails to appear, double check the location, name, size, and the tag being included within the pages.
Enjoy.
