Favicon: Difference between revisions

Content deleted Content added

Inline

Revision as of 09:58, 7 June 2010

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. Some programs allow the user to select an icon of his 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 standard 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 only completely support Microsoft Icon Files. Some^[who?] webmasters changed their preferred image's file extension to .ico without converting the file to Microsoft Icon Files.^{[citation needed]} This creates a file format error because the file type does not match the extension, and such icon images will not be displayed correctly by some older browsers.

W3C Expands on the Microsoft Standard

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.

Older versions of browsers such as Internet Explorer 5 and version 6^[3], Mozilla Firefox, 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]

Browser support

Browser	ICO	PNG	GIF	animated GIFs	JPEG	APNG	SVG
Google Chrome	Yes	4.0	4.0	No	4.0	No	No
Internet Explorer	4	No	No	No	No	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" />

Additionally 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, and it is generally used for all new content.^[7]

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. 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.

<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" />
<link rel="apple-touch-icon-precomposed" href="/somepath/image.png" />

References

^ "What's with Google's new mini icon?". British Broadcasting Corporation. 20 January 2009. Retrieved 2009-01-20. That 16x16 pixel square is the size of the favicon in question, if not the scope.
^ Dubost, Karl (2007-10-29). "How to Add a Favicon to your Site". World Wide Web Consortium. Retrieved 9 February 2010.
^ ^a ^b "How to Add a Shortcut Icon to a Web Page". Microsoft Developer Network. Microsoft. Retrieved 15 March 2010.
^ Butcher, Simon (2003-09-03). "Published specification". Internet Assigned Numbers Authority. Retrieved 2009-10-24.
^ "Bug 366324 - SVG site icons (favicons, shortcut icons) support". Retrieved 2010-02-21.
^ "Associating the Shortcut Icon with Your Web Page". Microsoft. Retrieved 9 February 2010.
^ "Chart of modern browser support for favicon". Retrieved 2009-07-28.
^ "iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips". Apple Inc. Retrieved 2010-05-27.
^ "Safari Web Content Guide: Configuring Web Application". Apple Inc. Retrieved 2010-05-27.

External links

Proposals with the W3C web standards organization on how to add a Favicon

[1] "What's with Google's new mini icon?". British Broadcasting Corporation. 20 January 2009. Retrieved 2009-01-20. That 16x16 pixel square is the size of the favicon in question, if not the scope.

[W3C,_Favicon-2] Dubost, Karl (2007-10-29). "How to Add a Favicon to your Site". World Wide Web Consortium. Retrieved 9 February 2010.

[msdn-3] "How to Add a Shortcut Icon to a Web Page". Microsoft Developer Network. Microsoft. Retrieved 15 March 2010.

[4] Butcher, Simon (2003-09-03). "Published specification". Internet Assigned Numbers Authority. Retrieved 2009-10-24.

[5] "Bug 366324 - SVG site icons (favicons, shortcut icons) support". Retrieved 2010-02-21.

[6] "Associating the Shortcut Icon with Your Web Page". Microsoft. Retrieved 9 February 2010.

[7] "Chart of modern browser support for favicon". Retrieved 2009-07-28.

[8] "iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips". Apple Inc. Retrieved 2010-05-27.

[9] "Safari Web Content Guide: Configuring Web Application". Apple Inc. Retrieved 2010-05-27.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

@@ Line 112: / Line 112: @@
 For devices such as the [[Apple Inc.|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.<ref>{{cite web|url=http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/MetricsLayout/MetricsLayout.html#//apple_ref/doc/uid/TP40007900-CH6-SW31|title=iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips|publisher=[[Apple Inc.]]|accessdate=2010-05-27}}</ref><ref>{{cite web|url=http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4
 |title=Safari Web Content Guide: Configuring Web Application|publisher=[[Apple Inc.]]|accessdate=2010-05-27}}</ref>
-The recommended size is 57 x 57 pixels, with 90 degree corners.  The "apple-touch-icon" icon is modified to add Rounded corners, Drop shadow and Reflective shine.  Alternatively, provide an "apple-touch-icon-precomposed" icon which is not modified.  Use one of the following example of code for HTML and XHTML.
+The recommended size is 57 x 57 pixels, with 90 degree corners.  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.
 * <code><link rel="apple-touch-icon" href="/somepath/image.ico" /></code>