Chameleon FAQ and Knowledgebase

Would you like to...

Print this page

Email this page

Post a comment

Subscribe me

Add to favorites

Remove Highlighting

Edit this Question

User Opinions (46 votes)

60% 39%

---

How would you rate this answer?

Helpful

Not helpful Help us improve. Why was this unhelpful?

Thank you for rating this answer.

The word ‘favicon’ is a short rendering of the phrase ‘favorite icon’. It refers to the icon made using a favicon maker that relates to a specific website address. While the favicon is mainly used by web browsers for identifying a webpage or website that has been saved in the Favorites or Bookmarks menu, it also serves as additional branding for a webpage address. When a webpage has a favicon, the favicon usually appears in the website address bar of the browser that supports favicons.

Compatible Browsers That Display Favicon

Software house Microsoft Corporation created the first favicon, which is the logo of Microsoft’s Internet Explorer web browser, for use in Internet Explorer (IE) web browser version 5.0 and later. An example of a favicon is the favicon IE7 displayed in the address bar, open tabs and Favorites menu of the newest version IE7 tab browser. When using IE for accessing websites, the web browser will request a favicon from a fixed Uniform Resource Locator (URL) or web page address extension, known as favicon.ico, from each website. The favicon of the website will then appear before its address in the IE address bar. When a website does not have a favicon, IE will load the default IE favicon.

Just like IE7 displays favicon IE7 and favicon of other websites, other web browsers compatible with Microsoft Windows and various Apple operating systems (OS) also support the favicon feature. These web browsers include Firefox, Safari, Netscape 7 as well as Opera 7.  These browsers generally display the favicon of a website next to its address in the address bar and beside website names saved in the Favorites or Bookmark menu. The tab browsers Mozilla Firefox and Opera also display the favicon in open tabs.

Reinforcing Company Branding with Favicon

Just like Microsoft used the IE logo in favicon IE7 for branding purposes, a favicon is usually used by companies for reinforcing their company branding. Websites with a favicon are few as compared with the large amount of websites online, so a company’s online presence is given more prominent with a favicon next to its website address. The favicon also acts an extension of the company’s image and translates a level of professionalism from the company. Most notably, the search engines such as Google (http://www.google.com) and Yahoo!; (http://www.yahoo.com) as well as media companies such as BBC and CNN: ( http://www.cnn.com/); have a favicon next to their index page address in the address bar of a browser.

In the past, the favicon was useful for tracking the number of people who bookmarked a website. Each time someone saves a website address with a favicon in the Favorites or Bookmarks menu, the web browser will request to download the favicon file from the website directory. Thus website owners can check the access log of their website for the number of favicon files that were downloaded.

However, this is no longer a relevant method of tracking the number of times a website address is saved. Web browsers now load the favicon before the corresponding website address in the web browser’s address bar the moment the website is displayed. This happens regardless whether the website address has been saved in the Favorites or Bookmarks menu.

How to Create a Favicon

A favicon can be created using a favicon maker then saved as a Windows Icon (ICO) file, also known as favicon ico. There are a  few prevailing requirements you should be aware of before you create favicon ico in a favicon maker. Firstly, the completed favicon ico canvas size is usually only 16 x 16 pixels. The working canvas can be larger when you create favicon in the favicon maker and this can be 32 x 32 pixels or 64 x 64 pixels, before the completed favicon ico is scaled down to 16 x 16 pixels. Next, favicon ico works well with 16 colors, although some browsers may support favicon ico in 256 colors. Lastly, keep in mind that the completed favicon ico has to be saved exactly as ‘favicon.ico’ for the website to recognize it as a favicon.

It is easy to create favicon from pic, logo or image on an image editor program compatible with Windows OS such as Adobe Photoshop CS, Adobe Photoshop Elements or Paint Shop Pro 9. These image editor programs can make favicon from pic into favicon ico format as long as the program has the ICO file format plug-in to do so. The free plug-in is available for download from Telegraphics website,

http://www.telegraphics.com.au/sw/.

Those who prefer a more personalized favicon for their website address can create favicon ico using a favicon maker program such as Icon Suite freeware or Pixel Toolbox by AxiomX Multimedia (http://www.axiomx.com/PixelToolbox/). There are also several online favicon maker programs available such as those from DeGreave.com website http://www.degraeve.com/favicon/ and Dynamic Drive website http://tools.dynamicdrive.com/favicon/. It is also possible to edit or create favicon by using the icon function in resource editors such as XN Resource Editor (http://www.wilsonc.demon.co.uk/d10resourceeditor.htm) freeware and Resource Builder; http://www.resource-builder.com/). A list of free resource editors is available for download from thefreecountry.com website;

http://www.thefreecountry.com/programming/resourceeditors.shtml

It is always convenient to create favicon ico from a jpeg file. However, if you have to make favicon from a png file, a good program for converting favicon png into favicon ico is png2ico. This freeware is available for download from:

http://www.winterdrache.de/freeware/png2ico/

Placing Favicon on a Web Page or Site

Once the favicon is created, the favicon ico file is ready for upload to the website where you want it to appear. The favicon ico can be uploaded to the same directory, also known as the root directory, of the website’s home or index page. Web browsers will automatically search website for the favicon ico file. Therefore, if a website has a favicon ico file saved in its root directory, the favicon ico will appear in the address bar of the browser. When someone saves a website address with a favicon ico, the favicon will appear in the Bookmark menu next to the bookmarked website address.