You must have seen the “g” icon that appears in browser’s address bar when you open a google page or a “W” icon for Wikipedia page. Have you ever wonder what are they called or How they are embedded there?
Google Icon –
Wikipedia Icon –
Those tiny icons in browser’s address bar are called as “Favorites Icon” or “FavIcon”. These are also known as a website icon, shortcut icon, url icon, or bookmark icon that are associated with a particular website or webpage. These are the icons (.ico) files with size 16 X 16 pixels or larger. How to put FavIcon in action? In early age of FavIcon, developers use to put a favIcon.ico file in root directory of web application. This would be then automatically used by Internet Explorer for favorites display. But soon, another flexible approach is created for implementing FavIcon. This new system used HTML for embedding the FavIcon for website. Later, HTML approach is revised to meet the standards of World Wide Web Consortium (W3C) and now all browsers supports this system. Although IE supports only for .ico formats, Mozilla and other browser also provide support for PNG and GIF image formats. There are two ways to add FavIcon to your website –
1. Use of ‘rel’ attribute (Preferred)
2. Put favicon.ico in predefined location in web app
· Use of ‘rel’ attribute –
The first approach for specifying a favicon is to use the rel attribute value “icon”. In this HTML 4.01 example, the FavIcon identified via the URI http://localhost:8080/MyApp/favicon.ico as being a favicon:
PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd“>
http://www.w3.org/2005/10/profile“>
http://localhost:8080/MyApp/favicon.ico”/>
FavIcon Example.
· Putting FavIcon in predefined url:
A second method for specifying a FavIcon relies on using a predefined URI to identify the image: “/favicon”, which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI. This approach is inconsistent with some principles of Web architecture and is being discussed by W3C’s Technical Architecture Group (TAG) as their issue siteData-36.
Here is a FavIcon that i put to my site –
References:
http://en.wikipedia.org/wiki/Favicon – Details the concept of FavIcon
http://www.html-kit.com/favicon/ – provides Utility to create FavIcon from gif and other formats.
