Jump to content

Favicon

From Wikipedia, the free encyclopedia

This is an old revision of this page, as edited by 66.104.60.6 (talk) at 22:17, 3 September 2010 (Undid revision 382761231 by 66.104.60.6 (talk)). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Favicons are displayed in most major graphical Web browsers.

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 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. Some programs allow the user to select an icon of their own from the hard drive and associate it with a website.

favicon.ico

Introduction and standardization

Microsoft was the first to introduce the favicon in Internet Explorer 4. In the original Microsoft standard, a file called favicon.ico was placed in the root directory of a web site. This would then automatically be used in Internet Explorer's favorites (bookmarks) display.

The Microsoft specification was later[when?] expanded to allow the location to be specified for any website directory location for a given page. This was achieved by adding a link element to the <head> section of the document, which specifies the name of the image file and its location. In this way, any image file defined by the World Wide Web Consortium (W3C) HTML recommendation may be used.

Because only the ICO format is completely cross-browser compatible with all modern browsers, as well as most browsers released after 2004, the .ICO format is the most widely used favicon format.

Legacy

Older Microsoft Internet Explorer versions completely support only Microsoft Icon Files. Simply changing file extension to .ico without converting the file to Microsoft Icon Files creates a file format error because the file type does not match the extension. Such icon images will not be displayed correctly by some older browsers.[citation needed]

W3C Expands on the Microsoft Specification

Microsoft created the original favicon feature for Internet Explorer, which would request a favicon from a specific file (/favicon.ico) in the root directory of every website (e.g., http://en.wikipedia.org/favicon.ico). Microsoft's original format standard for the link tag was expanded by the W3C HTML recommendation[2] to also include the following:

  • The rel attribute may also contain a space, so in addition to using rel="icon", conforming web browsers may also use a two-word link type (e.g. rel="shortcut icon").
  • 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.

Old versions of browsers such as Internet Explorer 5 and version 6,[3] and Netscape only recognize the favicon when the page is bookmarked, and fail to display when merely visiting the page.

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, which standardized the .ico filetype.[4]

Despite the standard the correct mime for icons is image/x-icon. The server response header should contain "Content-Type: image/x-icon" not "Content-Type: image/vnd.microsoft.icon" (although the latter is the standard mime type). Otherwise Internet Explorer 8 does not accept it (the user will see a blank page after typing the URL directly in the browser).

Browser support

Browser ICO PNG GIF animated GIFs JPEG APNG SVG
Google Chrome No 4.0 4.0 No 4.0 No No
Internet Explorer 4.0 8.0 No No 8.0 No No
Mozilla Firefox Yes Yes Yes Yes Yes 3.0 No[5]
Opera Yes Yes Yes Yes Yes Yes 9.6
Safari Yes 4.0 4.0 No 4.0 No No

The following format is cross-browser compatible and is supported by Internet Explorer, Firefox, Chrome, and Opera.[3]

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

The following is also acceptable:

  • <link rel="shortcut icon" href="/somepath/myicon.ico" />

The following shows the supported 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" />

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 root. 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.[6]

Additionally, such icon files can 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).

Most web browsers have since added support for the new W3C HTML recommendation,[7] and it is generally used for all new content[citation needed].

Device Support

For devices such as the Apple iPod Touch, iPhone, and iPad you can provide a custom icon that users can display on their Home screens using the Web Clip feature.[8][9] The recommended size is 57 x 57 pixels, with 90 degree corners. However with the more recent higher definition screens on Apple's products, Apple has their icon at 129 x 129 pixels.[10] The "apple-touch-icon" icon is modified to add rounded corners, drop shadow, and reflective shine. Alternatively, an "apple-touch-icon-precomposed" icon may be provided which is not modified by the devices before being displayed. Use one of the following example of code for HTML and XHTML.

With Apple Formatting

  • <link rel="apple-touch-icon" href="/somepath/image.ico" />
  • <link rel="apple-touch-icon" href="/somepath/image.png" />
  • <link rel="apple-touch-icon" href="/somepath/image.gif" />

Without Apple's rounded rectangle and shine

  • <link rel="apple-touch-icon-precomposed" href="/somepath/image.png" />

References

  1. ^ "What's with Google's new mini icon?". British Broadcasting Corporation. 20 January 2009. Retrieved 20 January 2009. That 16x16 pixel square is the size of the favicon in question, if not the scope.
  2. ^ Dubost, Karl (29 October 2007). "How to Add a Favicon to your Site". World Wide Web Consortium. Retrieved 9 February 2010.
  3. ^ a b "How to Add a Shortcut Icon to a Web Page". Microsoft Developer Network. Microsoft. Retrieved 15 March 2010.
  4. ^ Butcher, Simon (3 September 2003). "Published specification". Internet Assigned Numbers Authority. Retrieved 24 October 2009.
  5. ^ "Bug 366324 - SVG site icons (favicons, shortcut icons) support". Retrieved 21 February 2010.
  6. ^ "Associating the Shortcut Icon with Your Web Page". Microsoft. Retrieved 9 February 2010.
  7. ^ "Chart of modern browser support for favicon". Retrieved 28 July 2009.
  8. ^ "iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips". Apple Inc. Retrieved 27 May 2010.
  9. ^ "Safari Web Content Guide: Configuring Web Application". Apple Inc. Retrieved 27 May 2010.
  10. ^ http://www.apple.com/apple-touch-icon.png
Wikimedia Commons has media related to Favicons.
Look up favicon in Wiktionary, the free dictionary.

Retrieved from "https://en.wikipedia.org/w/index.php?title=Favicon&oldid=382761497"