Starting with Internet Explorer 5.0 and above, the web browsers currently existing on the market have the feature to display a favorite icon associated to your web pages URLs, when a visitor adds a certain URL to the bookmarks list. As a consequence, the website favorite icon (commonly named favicon) will be shown alongside the website title, in the bookmarks list. The modern web browsers like Mozilla Firefox and Opera are able to display the website favicon in address bar and in tabs.

A favorite icon is a .ico image file that can have the width and height values 16×16 or 32×32. The web browser will render the favicon.ico image at the dimensions of 16×16 (a 32×32 favicon.ico will be resized).

If you want to display a favicon associated to an existing website, first the favicon.ico file must be created or converted from an another existing file with an image processing application capable to handle .ico file type (Windows users could free download IrfanView). A good website for picking a favicon is iconspedia.com, which provides free icons of high quality in png and ico file format.

It is recommended to upload the favicon.ico file in the root directory of the website, because if the browser does not find the favicon.ico file in the web page directory, it will search for its existence in the root directory. In this way, you are not forced to perform multiple uploads of favicon.ico file in each directory of the website pages.

If you upload the favicon in another directory of your website, it can still be associated with the desired web pages by adding in the HTML head section the next line of code, where the name of the directory where favicon.ico resides must be provided. In the next example is assumed that the favicon.ico is situated in a directory called images:

<!– @page { size: 21.59cm 27.94cm; margin: 2cm } P { margin-bottom: 0.21cm } –>

The favicon is a recommended addition for any website, because it represent the website “personality”, a note of website individuality among other million of websites published over the Internet.

Related Articles

• Yahoo! Mobile Service Will Be Launched (0)
• Web Browsing In A Cinematic Fashion: Cooliris (0)
• Top 101 Most Downloaded Windows Software: Free Demo Movies and Download Links (0)
• The Instant Conversion Of Web Pages To PDF Files With Any Browser (0)
• Squish Provides Support For Web Applications Running in Firefox 3.0 (1)
• Safari 4 Beta Is Ready For Free Download (1)

This entry was posted on Thursday, February 12th, 2009 at 9:16 am and is filed under Tutorials, Web Developer Articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.