Favicon
A favicon (
/ˈfævɪˌkɒn/; short for favorites icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page.[1][2] A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browsers will then make use of it.[3] 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.[3] Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as desktop icon.[1]
Contents |
[edit] History
In March 1999, Microsoft released Internet Explorer 4 which supported favicons for the first time.[4] Originally, the favicon was a file called favicon.ico placed in the root directory (e.g., http://en.wikipedia.org/favicon.ico) of a web site. It was used in Internet Explorer's favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked.[5][6][7][4] A side effect was that the number of visitors who have bookmarked the page could be estimated by the requests of the favicon. This technique has become obsolete since all modern browsers support the favicon without bookmarking.[6]
[edit] Standardization
The favicon was standardized by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, released in December 1999, and later in the XHTML 1.0 recommendation, released in January 2000.[8][9] The standards use a link element with a rel attribute in the <head> section of the document to specify the file format, file name and a location can be specified for any website directory. 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.[10][11]
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.[12] When using the .ico format, Internet Explorer cannot display files served with the standardized MIME type. A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.[13]
RFC 5988 established an IANA link relation registry,[14] and rel="icon" was registered in 2010 based on the HTML5 specification. The popular rel="shortcut icon" actually identifies two relations shortcut and icon, but shortcut is not registered and (in theory) redundant.
[edit] Legacy
Microsoft Internet Explorer only supports the ICO file format; simply changing the filename extension of an image to .ico without converting it to an ICO file will result in an error and not displaying the favicon. Netscape 7, Internet Explorer 5, and version 6 browsers will only display the favicon when the page is bookmarked and not simply when the page is visited as in modern browsers.[4]
[edit] Browser implementation
The following table illustrate major web browsers supporting different features. The version numbers indicate the starting version of supporting a features.
[edit] File format support
The following table illustrate the image file format support for the favicon.
| Browser | ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
|---|---|---|---|---|---|---|---|
| Google Chrome | Yes | 4.0 | 4.0 | No | 4.0 | No | No |
| Internet Explorer | 5.0[15] | No[4][15] | No[15] | No[15] | No[15] | No[15] | No[15] |
| Firefox | 1.0[16] | 1.0[16] | 1.0[16] | Yes | Yes | 3.0 | No[17] |
| Opera | 7.0[18] | 7.0[18] | 7.0[18] | 7.0[18] | 7.0[18] | 9.5 | 9.6 |
| Safari | Yes | 4.0 | 4.0 | No | 4.0 | No | No |
Additionally, such icon files can be either 16×16, 32×32, or 48×48 pixels in size, and either 8-bit, 24-bit, or 32-bit in color depth.[1][3]
[edit] Use of favicon
This table illustrates the different possibilities where favicons can displayed.
 |
This section is outdated. Please update this section to reflect recent events or newly available information. Please see the talk page for more information. (February 2011) |
| Browser | address bar | links bar | bookmarks | tabs | drag to desktop |
|---|---|---|---|---|---|
| Google Chrome | No[19] | Yes[19] | 1.0[19] | 1.0[19] | Yes[19] |
| Internet Explorer | 7.0[note 1][19] | 5.0[19] | 5.0[19] | 7.0[19] | 5.0[19] |
| Firefox | 1.0[19] | Yes | Yes[19] | Yes[19] | Yes[19] |
| Opera | 7.0[19] | 7.0[19] | 7.0[19] | 7.0[19] | 7.0[19] |
| Safari | Yes[19] | No[19] | Yes[19] | No[19] | No[19] |
Opera Software added the ability to change the favicon in the Speed Dial in Opera 10.[20]
Some of common browsers stopped using the favicon in the address bar, because this place will be used to show the type of the pages.
[edit] Accessibility
This table illustrates the different ways the favicon can be recognized by the web browser.
| Google Chrome | Internet Explorer | Firefox | Opera | Safari | |
|---|---|---|---|---|---|
<link rel="shortcut icon" href="http://example.com/myicon.ico" /> |
Yes[4] | Yes[4][15] | Yes[4] | Yes[4] | Yes |
<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico" /> |
Yes | No[21] | Yes | Yes | Yes |
<link rel="icon" type="image/png" href="http://example.com/image.png" /> |
Yes | No[21] | Yes | Yes | Yes |
<link rel="icon" type="image/gif" href="http://example.com/image.gif" /> |
Yes | No[21] | Yes | Yes | Yes |
favicon.ico located in the web site's root |
Yes | Yes | Yes | Yes | Yes |
| favor of favicon: root or (X)HTML linked version. | ? | root | root | root | ? |
[edit] Device support
For Apple devices with the iOS operating system version 1.1.3 or later[22] such as the iPod Touch, iPhone, and iPad, one can provide a custom icon that users can display on their Home screens using the Web Clip feature.[23][24] This icon on the home screen is only a bookmarked page and if such a customized icon is not available, a thumbnail screenshot of the web page will be put on the home screen.[25]
The recommended size is 57×57 pixels, with 90 degree corners.[24] However with the more recent higher definition screens on Apple's products, Apple has their icon at 129×129 pixels.[26] The apple-touch-icon is modified to add rounded corners, drop shadow, and reflective shine.[24] Alternatively, an "apple-touch-icon-precomposed" icon may be provided to instruct devices not to apply reflective shine on the image.[24][25]
- With Apple Formatting
<link rel="apple-touch-icon" href="somepath/image.png" />
- Without Apple's reflective shine
<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />
As in case of favicon.ico file, browsers and mobile devices do not require any HTML to retrieve these icons.[25] Default location for the files are apple-touch-icon-precomposed.png and apple-touch-icon.png (in order of priority) located in the web site's root.[24][25]
The rel="icon" example in the unfinished HTML5 specification suggests to use link relation rel="icon" sizes="57x57" type="image/png" instead of similar rel="apple-touch-icon" constructs.
[edit] Limitations and criticism
On slow internet connections the favicon can add a few seconds for loading the whole page, if the favicon is not optimized and too big.[27] On the other hand the favicon will create extra traffic if it is not existent and a custom 404 page (not found) exists.[6][28] Finally, critics allege that by drive-by download through a custom 404 page, may be used to download trojan horses.[29]
Some old browsers such as the Internet Explorer for Mac didn't support the favicon or had problems in updating the favicon if a new one was uploaded.[7][30] Another disadvantage was that some web hosters didn't allow the use of ico files.[30]
The W3C recommendation only works in HTML or XHTML and not in other systems such as gopher. Additionally, the link element has to be added to every page and cannot be added to a full web site.[11] The W3C did not standardize the rel-attribute so there are other key words such as shortcut icon that are also accepted by the user agent.[11][15]
[edit] Notes
[edit] References
- ^ a b c Lane, Dave (9 August 2008). "Creating a multi-resolution favicon including transparency with the GIMP". egressive.com. http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp. Retrieved 25 February 2011.
- ^ "What's with Google's new mini icon?". BBC. 20 January 2009. http://news.bbc.co.uk/2/hi/uk_news/magazine/7839744.stm. Retrieved 25 February 2011. "That 16x16 pixel square is the size of the favicon in question, if not the scope."
- ^ a b c Apple, Jennifer. "Favicon - How To Create A Favicon.ico". Futura Studio. http://www.photoshopsupport.com/tutorials/jennifer/favicon.html. Retrieved 25 February 2011.
- ^ a b c d e f g h i "How to Add a Shortcut Icon to a Web Page". Microsoft Developer Network. Microsoft. http://msdn.microsoft.com/en-us/library/ms537656(VS.85).aspx. Retrieved 15 March 2010.
- ^ McGrew, Darin (26 April 2007). "Web Authoring FAQ - 8.11. How can I have a custom icon when people bookmark my site?". Web Design Group. http://www.htmlhelp.com/faq/html/all.html#favicon. Retrieved 23 February 2011.
- ^ a b c Heng, Christopher (7 September 2008). "What is Favicon.ico? Personalise Your Site's Bookmarks". thesitewizard.com. http://www.thesitewizard.com/archive/favicon.shtml. Retrieved 23 February 2011.
- ^ a b "Creating favicons with Adobe Photoshop and GoLive". Adobe GoLive. Archived from the original on 7 December 2003. http://web.archive.org/web/20031207165529/http://www.golivein24.com/tips/favicon/. Retrieved 25 February 2011.
- ^ "HTML 4.01 Specification". World Wide Web Consortium. 24 December 1999. http://www.w3.org/TR/html401/. Retrieved 14 March 2011.
- ^ "XHTML™ 1.0: The Extensible HyperText Markup Language". World Wide Web Consortium. 26 January 2000. http://www.w3.org/TR/2000/REC-xhtml1-20000126/. Retrieved 14 March 2011.
- ^ Dubost, Karl (October 2005). "Web site meta data profile: favicon, ...". World Wide Web Consortium. http://www.w3.org/2005/10/profile. Retrieved 23 February 2011.
- ^ a b c Dubost, Karl (24 October 2005). "How to Add a Favicon to your Site". World Wide Web Consortium. http://www.w3.org/2005/10/howto-favicon. Retrieved 25 February 2011.
- ^ Butcher, Simon (3 September 2003). "Published specification". Internet Assigned Numbers Authority. http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon. Retrieved 25 February 2011.
- ^ Irish, Paul (15 December 2010). "commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate". GitHub. https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee. Retrieved 25 February 2011.
- ^ "Link Relations". IANA. http://www.iana.org/assignments/link-relations/link-relations.xml.
- ^ a b c d e f g h i Davis, Jeff (1 March 2007). "why doesn't the favicon for my site appear in IE7?". jeff's WebLog at Microsoft Developer Network. Microsoft. http://blogs.msdn.com/b/jeffdav/archive/2007/03/01/why-doesn-t-the-favicon-for-my-site-appear-in-ie7.aspx. Retrieved 27 February 2011.
- ^ a b c David (19 July 2003). "Mozilla 0.9.6 Release Notes". Mozilla. http://www-archive.mozilla.org/releases/mozilla0.9.6/. Retrieved 23 February 2011.
- ^ Aleksej (26 January 2011). "Bug 366324 – SVG site icons (favicons, shortcut icons) support". Bugzilla. Mozilla. https://bugzilla.mozilla.org/show_bug.cgi?id=366324. Retrieved 23 February 2011.
- ^ a b c d e "Opera 7 for Windows Changelog". Opera Software. 28 January 2003. http://www.opera.com/docs/changelogs/windows/700/. Retrieved 28 February 2011.
- ^ a b c d e f g h i j k l m n o p q r s t u v w x Francis, Lewis (11 December 2007). "Chart of modern browser support for favicon". informationgift.com. http://informationgift.com/ud/faviconic/. Retrieved 23 February 2011.
- ^ "Opera 10.0 beta 2 for Windows changelog". Opera Software. 16 July 2009. http://www.opera.com/docs/changelogs/windows/1000b2/. Retrieved 27 February 2011.
- ^ a b c "REL Attribute - rel Property". Microsoft Developer Network. Microsoft. http://msdn.microsoft.com/en-us/library/ms534366.aspx. Retrieved 27 February 2011.
- ^ Hicks, John (17 January 2008). "Custom webclip icon on the iPhone/iPod Touch". HicksDesign. http://www.hicksdesign.co.uk/journal/custom-webclip-icon-on-the-iphoneipod-touch. Retrieved 11 March 2011.
- ^ "iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips". Apple Inc.. http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/MetricsLayout/MetricsLayout.html#//apple_ref/doc/uid/TP40007900-CH6-SW31. Retrieved 2010-05-27.
- ^ a b c d e "Safari Web Content Guide: Specifying a Webpage Icon for Web Clip". Apple Inc.. 15 November 2010. http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4. Retrieved 25 February 2011.
- ^ a b c d McLellan, Drew (17 January 2008). "How To Set an Apple Touch Icon for Any Site". All in the head. http://allinthehead.com/retro/319/how-to-set-an-apple-touch-icon-for-any-site. Retrieved 11 March 2011.
- ^ "Apple-touch-icon". Apple Inc.. http://www.apple.com/apple-touch-icon.png. Retrieved 25 February 2011.
- ^ Benkmann, Matthias. "How To Create And Install A favicon.ico". winterdrache.de. http://www.winterdrache.de/freeware/png2ico/favicon.html. Retrieved 23 February 2011.
- ^ Cole, Linda (3 August 1999). "he Dastardly "favicon.ico not found" Error". QuinStreet. http://www.wdvl.com/Authoring/Design/Images/Favicon/. Retrieved 25 February 2011.
- ^ RB (15 December 2009). "The mean missing Favicon". Security Blog. G Data. http://blog.gdatasoftware.com/index.php?id=6478&tx_ttnews%5Btt_news%5D=1511. Retrieved 14 March 2011.
- ^ a b Altom, Tim. "Creating Your Own Favicon.ico Icon For IE5". Web Developer's Journal. QuinStreet. http://www.webdevelopersjournal.com/articles/favicon.html. Retrieved 11 March 2011.
[edit] External links
 |
Look up favicon in Wiktionary, the free dictionary. |
Media related to Favicons at Wikimedia Commons- Proposals with the W3C web standards organization on how to add a Favicon
- Systems and Methods Involving Favicons IBM patent
- Favicons at the Open Directory Project
|
|||||||||||||||||||||||||||||||
