Favicon, SiteIcon


From Wikipedia, the free encyclopedia

favicon /ˈfæv.ɪˌkɒn/ (short for favorite icon), also known as a shortcut iconwebsite icontab iconURL icon, or bookmark icon, is a file containing one or more small icons,[1] associated with a particular website or web page.[1][2] A web designer can create such an icon and upload it to a website (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 (sometimes in the history as well) 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 a desktop icon.[1]

Favicons can also be used to have a textless favorite site, saving space.

Wikipedia’s favicon, shown in an older version of Firefox (from 2008)

History[edit]

In March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time.[4] Originally, the favicon was a file called favicon.ico placed in the root directory of a website. 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 had bookmarked the page could be estimated by the requests of the favicon. This side effect no longer works, as all modern browsers load the favicon file to display in their web address bar, regardless of whether the site is bookmarked.[6]

Standardization[edit]

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 standard implementation uses a link element with a rel attribute in the <head> section of the document to specify the file format and file name and location. Unlike in the prior scheme, the file can be in any Web site directory and have any image file format.[10][11]

In 2003, the .ico format was registered by a third party with the Internet Assigned Numbers Authority (IANA) under the MIME typeimage/vnd.microsoft.icon.[12][13] However, when using the .ico format to display as images (e.g. not as favicon), Internet Explorer cannot display files served with this standardized MIME type.[13] A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.[14]

RFC 5988 established an IANA link relation registry,[15] and rel="icon" was registered in 2010 based on the HTML5 specification. The popular <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> theoretically identifies two relations, “shortcut” and “icon“, but “shortcut” is not registered and is redundant. In 2011 the HTML living standard[16] specified that for historical reasons “shortcut” is allowed immediately before “icon“;[17] however, “shortcut” does not have a meaning in this context.

Legacy[edit]

Internet Explorer 5–10 supports only the ICO file formatNetscape 7 and Internet Explorer versions 5 and 6 display the favicon only when the page is bookmarked, and not simply when the page is visited as in later browsers.[4]

Browser implementation[edit]

The following table illustrates major web browsers supporting different features. The version numbers indicate the starting version of a supported feature.

File format support[edit]

The following table illustrates the image file format support for the favicon.

Browser ICO PNG GIF animated GIFs JPEG APNG SVG
Edge Yes Yes Yes No Unknown Unknown Unknown
Firefox 1.0[18] 1.0[18] 1.0[18] Yes[19] Yes 3.0[19] 41.0[20]
Google Chrome Yes Yes 4.0 4.0[21] 4.0 No No[22]
Internet Explorer 5.0[23] 11.0[24] 11.0[24] No[23] No[23] No[23] No[25]
Opera 7.0[26] 7.0[26] 7.0[26] 7.0[26] 7.0[26] 9.5 44.0[27]
Safari Yes 4.0 4.0 No 4.0 No No

Additionally, such icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.[1][3] The ICO file format article explains the details for icons with more than 256 colors on various Microsoft Windows platforms.

Use of favicon[edit]

This table illustrates the different areas of the browser where favicons can be displayed.

Browser Address bar Address bar drop down list Links bar Bookmarks Tabs Drag to desktop
Edge No Yes Yes Yes Yes Yes
Firefox 1.0–12.0: Yes[28]
> v13: No[29]
Yes Yes Yes[28] Yes[28] Yes[28]
Google Chrome No[28] No Yes[28] Yes[28] 1.0[28] No[28]
Internet Explorer 7.0[28] No 5.0[28] 5.0[28] 7.0[28] 5.0[28]
Opera 7.0–12.17: Yes
> v14: No[28]
No 7.0[28] 7.0[28] 7.0[28] 7.0[28]
Safari Yes[28] Yes No[28] Yes[28] No[30] No[28]

Wikipedia’s favicon, shown in Opera

Opera Software added the ability to change the favicon in the Speed Dial in Opera 10.[31]

How to use[edit]

This table illustrates the different ways the favicon can be recognized by the web browser. The standard implementation uses a link element with a rel attribute in the <head> section of the document to specify the file format and file name and location.

Edge Firefox Google Chrome Internet Explorer Opera Safari
<link rel="shortcut icon"
 href="http://example.com/myicon.ico">
Yes[4] Yes[4] Yes[4] Yes[4][23] Yes[4] Yes
<link rel="icon"
 type="image/vnd.microsoft.icon"
 href="http://example.com/image.ico">
Yes Yes Yes Yes (from IE 9)[24] Yes Yes
<link rel="icon" type="image/x-icon"
 href="http://example.com/image.ico">
Yes[4] Yes[4] Yes[4] Yes (from IE 9)[32] Yes[4] Yes
<link rel="icon"
 href="http://example.com/image.ico">
Yes Yes Yes Yes (from IE 11)[24] Yes Yes
<link rel="icon" type="image/gif"
 href="http://example.com/image.gif">
Yes Yes Yes Yes (from IE 11)[24] Yes Yes
<link rel="icon" type="image/png"
 href="http://example.com/image.png">
Yes Yes Yes Yes (from IE 11)[24] Yes Yes
<link rel="icon" type="image/svg+xml"
 href="http://example.com/image.svg">
Yes Yes Yes Yes Yes Yes
favicon.ico located in the website’s root Yes Optional[33] Yes Yes Optional[34] Yes
precedence: prefer root or (X)HTML linked version linked[28] linked[28] linked[28] linked[28] ? ?

If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32×32 favicon. Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the ICO. If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version, only to scale it back down to 16×16 on non-retina devices. Opera will choose from any of the available icons completely at random.[35]

Only SeaMonkey doesn’t fetch favicon.ico files in the website’s root by default.[36]

Device support[edit]

For Apple devices with the iOS operating system version 1.1.3 or later, as well as some Android devices,[37] it is possible to provide a custom icon that users can display on their Home screens using the Web Clip feature (called Add to Home Screen within Mobile Safari).[38][39] This feature is enabled by supplying a <link rel="apple-touch-icon" ...> in the <head> section of documents served by the website. If the custom icon is not provided, a thumbnail of the web page will be put on the home screen instead.[40]

The recommended basic size for this icon is 60×60 pixels; for best display on the higher-resolution iPhone 4 screen, an icon size of 120×120 pixels is recommended.[39][41][42]

For the iPad and iPad 2, the basic size is 76×76 pixels. For the third-generation iPad, the high-resolution size would be 152×152 pixels.[43] Android tablets [via Chrome] prefer a 192×192 PNG icon.[44]

The icon file referenced by apple-touch-icon is modified to add rounded corners, drop shadow, and reflective shine.[39] Alternatively, an apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image.[39][40]

With rounded corners, added by iOS
<link rel="apple-touch-icon" href="somepath/image.png">
Without reflective shine
<link rel="apple-touch-icon-precomposed" href="somepath/image.png">

No HTML is required by browsers or mobile devices to retrieve these icons, either.[40] The website’s root is the default location for the files apple-touch-icon-precomposed.png and apple-touch-icon.png (in order of priority).[39][40]

HTML5 recommendation for icons in multiple sizes[edit]

The current HTML5 specification recommends specifying multiple sizes for the icons, using the attributes rel="icon" sizes="space-separated list of icon dimensions" within a <link> tag.[45] Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon’s content type in the format type="file content-type" within the <link> tag.

As of iOS 5, Apple mobile devices ignore the HTML5 recommendation and instead use the proprietary apple-touch-icon method detailed above. The Google Chromeweb browser however, will select the closest matching size from those provided in the HTML headers to create 128×128 pixel application icons, when the user chooses the Create application shortcuts… from the “Tools” menu.

Animated favicons[edit]

Various browsers such as Chrome, Firefox and Opera support animation of favicons. A bug report has been open for Firefox since 2001 requesting a way to disable the feature.[46][47]

Limitations and criticism[edit]

Due to the need to always check for it in a fixed location, the favicon can lead to artificially slow page-load time and unnecessary 404 entries in the server log if it is nonexistent.[6]

The W3C did not standardize the rel-attribute, so there are other keywords such as shortcut icon that are also accepted by the user agent.[11][23]

Favicons are often manipulated as part of phishing or eavesdropping attacks against HTTPS webpages. Many web browsers display favicons near areas of the web browser’s UI, such as the address bar, that are used to convey whether the connection to a website is using a secure protocol like TLS. By changing the favicon to a familiar padlock image an attacker can attempt to trick the user into thinking they are securely connected to the proper website. Automated man-in-the-middle attack tools such as SSLStrip utilize this trick.[48] In order to eliminate this, some web browsers display the favicon within the tab whilst displaying the security status of the protocol used to access the website beside the URL.[49]

Since favicons are usually located at the root of the site directory on the server, they can be employed with some reliability to disclose whether a web client is logged into a given service. This works by making use of the redirect-after-login feature of many websites, by querying for the favicon in a redirect-after-login URL and testing the server response to discern whether the user is given the requested resource (which means they are logged in), or instead redirected to the login page (which means that they aren’t logged into the service).[50]

References[edit]

  1. Jump up to:a b c d Lane, Dave (9 August 2008). “Creating a Multi-Resolution Favicon Including Transparency with the GIMP”Egressive.com. Archived from the original on 25 December 2010. Retrieved 25 February 2011.
  2. Jump up^ “What’s With Google’s New Mini Icon?”. BBC. 20 January 2009. Retrieved 25 February 2011That 16×16 pixel square is the size of the favicon in question, if not the scope.
  3. Jump up to:a b c Apple, Jennifer. “Favicon — How To Create A Favicon.ico”. Photoshopsupport.com. Retrieved 25 February 2011.
  4. Jump up to:a b c d e f g h i j k l “How to Add a Shortcut Icon to a Web Page”Microsoft Developer Network. Microsoft. Retrieved 15 March 2010.
  5. Jump up^ McGrew, Darin (26 April 2007). “Web Authoring FAQ – 8.11. How can I have a custom icon when people bookmark my site?”. htmlhelp.com. Retrieved 23 February 2011.
  6. Jump up to:a b c Heng, Christopher (7 September 2008). “What is Favicon.ico? Personalise Your Site’s Bookmarks”. thesitewizard.com. Retrieved 23 February 2011.
  7. Jump up^ “Creating favicons with Adobe Photoshop and GoLive”Adobe GoLive. Archived from the original on 7 December 2003. Retrieved 25 February 2011.
  8. Jump up^ “HTML 4.01 Specification”. World Wide Web Consortium. 24 December 1999. Retrieved 14 March 2011.
  9. Jump up^ “XHTML™ 1.0: The Extensible HyperText Markup Language”. World Wide Web Consortium. 26 January 2000. Retrieved 14 March 2011.
  10. Jump up^ Dubost, Karl (October 2005). “Web site meta data profile: favicon, …” World Wide Web Consortium. Retrieved 23 February 2011.
  11. Jump up to:a b Dubost, Karl (24 October 2005). “How to Add a Favicon to your Site”. World Wide Web Consortium. Retrieved 25 February 2011.
  12. Jump up^ Butcher, Simon (3 September 2003). “Published specification”. Internet Assigned Numbers Authority. Retrieved 25 February 2011.
  13. Jump up to:a b “IE9 RC Minor Changes List”IEInternals. Retrieved 2016-04-07.
  14. Jump up^ Irish, Paul (15 December 2010). “commit 37b5fec090d00f38de64 to paulirish’s html5-boilerplate”GitHub. Retrieved 25 February 2011.
  15. Jump up^ “Link Relations”IANA.
  16. Jump up^ Ian Hickson (19 January 2011). “HTML is the new HTML5”The WHATWG BlogWHATWG.
  17. Jump up^ “HTML5 revision r6404”HTML5 Tracker.
  18. Jump up to:a b c David (19 July 2003). “Mozilla 0.9.6 Release Notes”Mozilla. Retrieved 23 February 2011.
  19. Jump up to:a b “Bug 111373: don’t allow animated site icons (favicons)”. Retrieved 1 June2014.
  20. Jump up^ Daniel Holbert (12 June 2015). “Bug 366324 – SVG site icons (favicons, shortcut icons) support – comment 55”Bugzilla@Mozilla. Mozilla. Retrieved 12 June 2015.
  21. Jump up^ tracker, chromium. “no movement in favicon”. chromium.org. Retrieved 11 April2016.
  22. Jump up^ “Issue 294179 – chromium – support svg favicon – An open-source project to help move the web forward. – Google Project Hosting”. Google. 18 September 2013. Retrieved 17 August 2014.
  23. Jump up to:a b c d e f Davis, Jeff (27 December 2007). “why doesn’t the favicon for my site appear in IE7?”jeffdav on code. Microsoft. Retrieved 11 March 2013.
  24. Jump up to:a b c d e f “Fun with Favicons”. Microsoft. 7 September 2013. Retrieved 3 November 2013.
  25. Jump up^ “SVG favicon support”. Microsoft Connect. 2013-05-03. Retrieved 2014-09-04.
  26. Jump up to:a b c d e “Opera 7 for Windows Changelog”. Opera Software. 28 January 2003. Retrieved 28 February 2011.
  27. Jump up^ “What’s new in Opera”. Opera Software. Retrieved 24 June 2017.
  28. Jump up to:a b c d e f g h i j k l m n o p q r s t u v w x y z aa Francis, Lewis (11 December 2007). “Chart of modern browser support for favicon”. informationgift.com. Retrieved 23 February 2011.
  29. Jump up^ “Firefox deems favicons risky, banishes them from address bar”. Engadget. Retrieved 2012-09-10.
  30. Jump up^ Gruber, John (10 August 2017). “Safari Should Display Favicons in Its Tabs”Daring Fireball. Retrieved 12 August 2017… the fact that Safari does not show favicons on tabs …
  31. Jump up^ “Opera 10.0 beta 2 for Windows changelog”. Opera Software. 16 July 2009. Retrieved 27 February 2011.
  32. Jump up^ “IE9 RC Minor Changes List”. Microsoft. 11 February 2011. Retrieved 16 November 2013.
  33. Jump up^ Firefox only accepts favicon.ico in the website’s root without a <link> tag if the setting browser.chrome.favicons is set to true in about:config. The default value is true. If set to false, these favicons are ignored.
  34. Jump up^ Opera loads /favicon.ico only if Multimedia/Always load favicon option in opera:config is set to 1. See Opera Support page for more details.
  35. Jump up^ Jonathan T. Neal (16 January 2013). “Understand the Favicon”. Retrieved 30 May2013.
  36. Jump up^ Mathias Bynens (14 April 2010). “rel=”shortcut icon” considered harmful”. Retrieved 15 November 2011.
  37. Jump up^ Mathias Bynens (2 March 2011). “Everything you always wanted to know about touch icons”. Retrieved 15 November 2011.
  38. Jump up^ “iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips”. Apple Inc. Retrieved 2010-05-27.
  39. Jump up to:a b c d e “Safari Web Content Guide: Specifying a Webpage Icon for Web Clip”. Apple Inc. 15 November 2010. Retrieved 25 February 2011.
  40. Jump up to:a b c d McLellan, Drew (17 January 2008). “How To Set an Apple Touch Icon for Any Site”. Allinthe head.com. Retrieved 11 March 2011.
  41. Jump up^ “iOS Human Interface Guidelines: Custom Icon and Image Creation Guidelines, Table 8-1”. Apple Inc. Retrieved 2011-07-16.
  42. Jump up^ “Apple-touch-icon”. Apple Inc. Retrieved 25 February 2011.
  43. Jump up^ “iPad Apple Touch Icon”. Retrieved 2012-02-12.
  44. Jump up^ “Android Chrome and its favicon”. Retrieved 2014-09-09.
  45. Jump up^ “HTML Living Standard, Section 4.6.6.6 ‘Link type “icon”‘”. WHATWG. Retrieved 2015-11-17.
  46. Jump up^ “Bug 111373 – don’t allow animated site icons (favicons)”. bugzilla.mozilla.org. 2001-11-21.
  47. Jump up^ “Firefox Bug 111373 – don’t allow animated site icons (mozilla.org)”. Hacker News. 7 July 2015.
  48. Jump up^ Marlinspike, Moxie (21 February 2011). “Defeating Ssl Using Sslstrip (Marlinspike Blackhat)”(see description of video). SecurityTube. Retrieved 9 July 2011.
  49. Jump up^ “Firefox version 14 features”. Retrieved 18 July 2012.
  50. Jump up^ Linus, Robin. “Your Social Media Fingerprint”. Retrieved 2016-10-14.

External links[edit]

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s