Favicon

From Wikipedia, the free encyclopedia

Jump to: navigation, search
Favicons are displayed in most major graphical Web browsers.

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.[1] A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab.

Contents

[edit] favicon.ico

[edit] Introduction and standardization

The original means of defining a favicon, introduced in Internet Explorer 4, was by placing a file called favicon.ico in the root directory of a web server. This would then automatically be used in Internet Explorer's favorites (bookmarks) display. Later, however, a more flexible system was created using HTML to indicate the location of an icon for any given page. As detailed below, this is achieved by adding a link element to the <head> section of the document, which specifies the type of the image file and its location. In this way, any image file defined by the standard may be used. Although many still use the ICO format, other browsers (though notably not Microsoft's Internet Explorer) now also support PNG and GIF (including animated GIFs). Firefox and Opera also read JPEG and APNG favicons.

[edit] Legacy

Older Microsoft Internet Explorer versions only completely support Microsoft Icon Files. Many webmasters have changed their preferred image's file extension to .ico without converting them to Microsoft Icon Files. This creates a conflict that IE cannot resolve; such icon images will not be displayed.

Most modern browsers implement both methods of favicon support.

[edit] Previous issues with standardization

Microsoft created the original favicon feature for IE, which would request a favicon from a set URL (/favicon.ico) in the root directory of every website (e.g., http://en.wikipedia.org/favicon.ico). Microsoft's supported format for the link tag did not conform to the World Wide Web Consortium (W3C) HTML recommendation [2] because:

  • The rel attribute must contain a space-delimited list of link types, so conforming web browsers do not correctly understand a two-word link type (e.g. rel="shortcut icon").
  • The ".ico" file format (a raster format used for icons on Microsoft Windows) did not have a registered MIME type and wasn't likely to be automatically understood by most web browsers.
  • The use of a reserved location on a website conflicts with the Architecture of the World Wide Web and is known as link squatting or URL squatting.

In addition, older versions of IE only recognized the favicon when the page was bookmarked, and failed to display when merely visiting it.

[edit] Standardization and implementation

In 2003 the .ico format was registered by Simon Butcher with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon, finally standardizing the filetype.[3] (This also means that the filetype image/x-icon is no longer correct.)

The web browsers Mozilla Firefox and Opera added further support for favicons, in a way that conformed to web standards by letting web designers add favicons in any of the following four graphics formats:

The following shows the correct format of link tags, using examples, for HTML and XHTML.

HTML:

  • <link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico">
  • <link rel="icon" type="image/png" href="http://example.com/image.png">
  • <link rel="icon" type="image/gif" href="http://example.com/image.gif">

XHTML:

  • <link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
  • <link rel="icon" type="image/png" href="/somepath/image.png" />
  • <link rel="icon" type="image/gif" href="/somepath/image.gif" />

Internet Explorer has a slightly different format.[4]

  • <link rel="SHORTCUT ICON" href="http://www.example.com/myicon.ico"/>

Additionally the following is also acceptable:

  • <link rel="SHORTCUT ICON" href="/somepath/myicon.ico"/>

Most web browsers do not require any HTML to retrieve a favicon that conforms to the de facto file name and type (favicon.ico) located in the web site's docroot. If no favicon link is detected upon HTML page load completion and no previous site visits are recorded in the browser's history, a favicon.ico is requested automatically[citation needed].

Additionally, such icon files should be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries). Firefox can display animated GIFs and (starting with version 3) APNGs as icons.

Most web browsers have since added support for the new standard, and it is generally used for all new content. [5]

[edit] References

  1. ^ "What's with Google's new mini icon?". British Broadcasting Corporation. 20 January 2009. http://news.bbc.co.uk/2/hi/uk_news/magazine/7839744.stm. Retrieved 2009-01-20. "That 16x16 pixel square is the size of the favicon in question, if not the scope." 
  2. ^ How to Add a Favicon to your Site - QA @ W3C
  3. ^ Butcher, Simon (2003-09-03). "Published specification". iana.org. http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon. Retrieved 2009-10-24. 
  4. ^ "How to Add a Shortcut Icon to a Web Page". http://msdn.microsoft.com/en-us/library/ms537656%28VS.85%29.aspx. Retrieved 2009-08-11. 
  5. ^ "Chart of modern browser support for favicon". http://informationgift.com/ud/faviconic/. Retrieved 2009-07-28. 

[edit] External links

Search Wiktionary Look up favicon in Wiktionary, the free dictionary.
Retrieved from "http://en.wikipedia.org/wiki/Favicon"