Define a Favicon Icon

what is favicon iconA favicon(short for favorites icon) is an icon associated with a particular website or webpage.  A favicon also known as a shortcut icon, Web site icon, URL icon, or bookmark icon.

The consequences were that the use of a reserved location on a website is no longer required and the favicon file can be located anywhere in the web directory tree and any image file format can be used. The format for the image you have chosen must be 16×16 pixels or 32×32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO. Once You have an image or icon to use as favicon icon, you need to know the approach to add that in your web page.

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://example.com/image_16x16.gif as being a favicon:

<link rel=”icon” type=”image/png” href=”http://www.example.com/ favicon.png” />

For Example Tuts Publications Network used the below code to define favicon:

<link rel=”icon” type=”image/png” href=”http://www.tutpub.com/ tp_16x16.png ” />

 

The XHTML 1.0 version looks very similar:

<link rel=”icon”

type=”image/png”

href=”/somewhere/myicon.png” />

 

A second approach 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. One practical consideration illustrates the problem: many users have Web sites even though they do not have their own domain name. These users cannot specify favicons using the second method if they cannot write to the server root. However, they can use method one to specify a favicon since it is more flexible and does not constrain the site manager to use a single favicon at a single place on the site.

 

Refferences:

  • http://www.w3.org/2005/10/howto-favicon
  • http://en.wikipedia.org/wiki/Favicon

 

Author Info

Shah Alom

Hi, This is Mohammad Shah Alom, My passion is Programming & Web Development. I am Founder of Micro Solutions Bangladesh. My Facebook profile shahalom1983 & Twitter Profile shahalom_83