View source for Favicon

{{short description|Icon associated with a particular web site}}
{{Use dmy dates|date=January 2022}}
[[File:Wikipedia favicon in Firefox on KDE (2023).png|thumb|280px|[[Wikipedia]]'s favicon, shown in [[Firefox]]]]
A '''favicon''' ({{IPAc-en|ˈ|f|æ|v|.|ɪ|ˌ|k|ɒ|n}}; short for '''favorite icon'''), also known as a '''shortcut icon''', '''website icon''', '''tab icon''', '''URL icon''', or '''bookmark icon''', is a file containing one or more small [[icon (computing)|icons]]<ref name="egressive" /> associated with a particular [[website]] or [[web page]].<ref name="egressive">{{cite web|url=http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp |website=Egressive.com |date=9 August 2008 |title=Creating a Multi-Resolution Favicon Including Transparency with the GIMP |first=Dave |last=Lane |access-date=25 February 2011 |url-status=dead |archive-url=https://web.archive.org/web/20101225130900/http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp |archive-date=25 December 2010 }}</ref><ref>{{Cite news|title=What's With Google's New Mini Icon?|url=https://news.bbc.co.uk/2/hi/uk_news/magazine/7839744.stm|quote=That 16x16 pixel square is the size of the favicon in question, if not the scope.|publisher=BBC|date=20 January 2009|access-date=25 February 2011|archive-date=30 December 2017|archive-url=https://web.archive.org/web/20171230062131/http://news.bbc.co.uk/2/hi/uk_news/magazine/7839744.stm|url-status=live}}</ref> A [[web design]]er can create such an icon and upload it to a website (or web page) by several means, and graphical [[web browser]]s will then make use of it.<ref name="photoshop" /> 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 [[Bookmark (World Wide Web)|bookmarks]].<ref name="photoshop" /> 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 browser]]s use the favicon as a [[desktop icon]].<ref name="egressive" />
<!-- Stop adding images of proprietary web browsers. They aren't needed to explain what favicons are. If you want to tell people where favicons are in IE 7 then do it on an IE HowTo. -->

==History==
In March 1999, [[Microsoft]] released [[Internet Explorer 5]], which supported favicons for the first time.<ref name="msdn" /> Originally, the favicon was a [[computer file|file]] called <code>favicon.ico</code> 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.<ref name="msdn" /><ref>{{cite web|url=http://www.htmlhelp.com/faq/html/all.html#favicon|title=Web Authoring FAQ – 8.11. How can I have a custom icon when people bookmark my site?|access-date=23 February 2011|date=26 April 2007|first=Darin|last=McGrew|website=htmlhelp.com|archive-date=16 December 2019|archive-url=https://web.archive.org/web/20191216054408/https://www.htmlhelp.com/faq/html/all.html#favicon|url-status=live}}</ref><ref name="heng" /><ref name="golive">{{cite web|url=http://www.golivein24.com/tips/favicon/|archive-url=https://web.archive.org/web/20031207165529/http://www.golivein24.com/tips/favicon/|archive-date=7 December 2003|title=Creating favicons with Adobe Photoshop and GoLive|publisher=[[Adobe GoLive]]|access-date=25 February 2011|url-status=unfit}}</ref> 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.<ref name="heng">{{cite web|url=http://www.thesitewizard.com/archive/favicon.shtml|access-date=23 February 2011|title=What is Favicon.ico? Personalise Your Site's Bookmarks|first=Christopher|last=Heng|date=7 September 2008|publisher=thesitewizard.com}}</ref>{{Clear}}

===Standardization===
In 2003, the <code>[[ICO (file format)|.ico]]</code> format was registered by a third party with the [[Internet Assigned Numbers Authority]] (IANA) under the [[Internet media type|MIME type]] <code>image/vnd.microsoft.icon</code>.<ref>{{cite web|url=https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon|title=Published specification|last=Butcher|first=Simon|date=3 September 2003|publisher=Internet Assigned Numbers Authority|access-date=25 February 2011|archive-date=4 October 2003|archive-url=https://web.archive.org/web/20031004204315/https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon|url-status=live}}</ref><ref name=":0">{{Cite web|url=https://blogs.msdn.microsoft.com/ieinternals/2011/02/11/ie9-rc-minor-changes-list/#comments|title=IE9 RC Minor Changes List|website=IEInternals|access-date=2016-04-07|archive-date=24 March 2016|archive-url=https://web.archive.org/web/20160324094641/https://blogs.msdn.microsoft.com/ieinternals/2011/02/11/ie9-rc-minor-changes-list/#comments|url-status=live}}</ref> However, when using the <code>.ico</code> format to display as images (that is, not as favicon), Internet Explorer cannot display files served with this standardized MIME type.<ref name=":0" /> A [[workaround]] for Internet Explorer is to associate <code>.ico</code> with the non-standard <code>image/x-icon</code> MIME type in web servers.<ref>{{cite web|url=https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee|title=commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate|last=Irish|first=Paul|date=15 December 2010|publisher=[[GitHub]]|access-date=25 February 2011|archive-date=18 October 2015|archive-url=https://web.archive.org/web/20151018211508/https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee|url-status=live}}</ref>

RFC 5988 established an IANA link relation registry,<ref>{{cite web|title=Link Relations|url=https://www.iana.org/assignments/link-relations/link-relations.xml|publisher=[[Internet Assigned Numbers Authority|IANA]]|access-date=1 November 2020|archive-date=30 April 2020|archive-url=https://web.archive.org/web/20200430173652/http://www.iana.org/assignments/link-relations/link-relations.xml|url-status=live}}</ref> and <code>rel="icon"</code> was registered in 2010 based on the [[HTML5]] specification. The popular <code><link rel="shortcut icon" type="image/png" href="image/favicon.png"></code> theoretically identifies two relations, <code>shortcut</code> and <code>icon</code>, but <code>shortcut</code> is not registered and is redundant. In 2011 the [[HTML5|HTML living standard]]<ref>{{cite web|url=http://blog.whatwg.org/html-is-the-new-html5|title=HTML is the new HTML5|author=Ian Hickson|author-link=Ian Hickson|date=19 January 2011|work=The WHATWG Blog|publisher=[[WHATWG]]|access-date=10 August 2011|archive-date=6 October 2019|archive-url=https://web.archive.org/web/20191006023430/https://blog.whatwg.org/html-is-the-new-html5|url-status=live}}</ref> specified that for historical reasons <code>shortcut</code> is allowed immediately before <code>icon</code>;<ref>{{cite web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#icon|title=HTML attribute: rel - #icon}}</ref> however, <code>shortcut</code> does not have a meaning in this context.

===Legacy===
Internet Explorer 5–10 supports only the [[ICO (file format)|ICO file format]]. [[Netscape 7]] and Internet Explorer versions 5 and [[Internet Explorer 6|6]] display the favicon only when the page is bookmarked, and not simply when the pages are visited as in later browsers.<ref name="msdn">{{cite web|url=http://msdn.microsoft.com/en-us/library/ms537656(VS.85).aspx|title=How to Add a Shortcut Icon to a Web Page|work=[[Microsoft Developer Network]]|publisher=Microsoft|access-date=15 March 2010|archive-url=https://web.archive.org/web/20180105185417/https://msdn.microsoft.com/en-us/library/ms537656(VS.85).aspx|archive-date=5 January 2018|url-status=dead}}</ref>

==Examples of favicons==
<gallery size="50px">
File:Etsy icon.svg|alt=|[[Etsy]]
File:Google_Favicon_2025.svg|[[Google]]
File:Microsoft icon.svg|alt=|[[Microsoft]]
File:PayPal Logo Icon 2014.svg|alt=|[[PayPal]]
File:Roblox player icon black.svg|alt=|[[Roblox]]
File:Spotify icon.svg|alt=|[[Spotify]]
File:Wikipedia's_W.svg|alt=|[[Wikipedia]]
File:X logo 2023.svg|alt=|[[Twitter|X]] (formerly Twitter)
File:YouTube full-color icon (2024).svg|alt=|[[YouTube]]
</gallery>

==Browser implementation==
The following tables illustrate support of various features with major web browsers. Unless noted, the version numbers indicate the starting version number of a supported feature.

===Image file format support===
The following table illustrates the [[image file format]] support for the favicon.
{| class="wikitable" style="text-align: center"
|-
!rowspan=2|Browser
!colspan=7|Image file format
|-
![[ICO (file format)|ICO]]
![[Portable Network Graphics|PNG]]
![[Graphics Interchange Format|GIF]]
![[Animated GIF]]s
![[JPEG File Interchange Format|JPEG]]
![[APNG]]
![[Scalable Vector Graphics|SVG]]
|-
|[[Microsoft Edge|Edge]]
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{No}}
|{{Yes}}
|{{Unknown}}
|{{Yes}}
|-
|[[Firefox]]<!--Firefox "start" or earliest version I used is version 1, although it is supporting since beginning!: mabdul -->
|{{Yes|1.0}}<ref name="mozilla.9.6">{{cite web|url=https://www-archive.mozilla.org/releases/mozilla0.9.6/|title=Mozilla 0.9.6 Release Notes|publisher=[[Mozilla]]|author=David|access-date=23 February 2011|date=19 July 2003|archive-date=19 September 2018|archive-url=https://web.archive.org/web/20180919070607/https://www-archive.mozilla.org/releases/mozilla0.9.6/|url-status=live}}</ref><!--This reference is totally ok: Mozilla was later changed to the [[Gecko (layout engine)]] and thus becoming the "underground" for firefox!-->
|{{Yes|1.0}}<ref name="mozilla.9.6" />
|{{Yes|1.0}}<ref name="mozilla.9.6" />
|{{Yes}}<ref name="ffbug">{{cite web|url=https://bugzilla.mozilla.org/show_bug.cgi?id=111373|title=Bug 111373: don't allow animated site icons (favicons)|access-date=1 June 2014|archive-date=9 October 2019|archive-url=https://web.archive.org/web/20191009165311/https://bugzilla.mozilla.org/show_bug.cgi?id=111373|url-status=live}}</ref>
|{{Yes}}
|{{Yes|3.0}}<ref name="ffbug" />
|{{Yes|41.0}}<ref>{{cite web
 |title=Bug 366324&nbsp;– SVG site icons (favicons, shortcut icons) support – comment 55
 |url=https://bugzilla.mozilla.org/show_bug.cgi?id=366324#c22
 |access-date=12 June 2015
 |publisher=Mozilla
 |author=Daniel Holbert
 |work=Bugzilla@Mozilla
 |date=12 June 2015
 |archive-date=9 October 2019
 |archive-url=https://web.archive.org/web/20191009174656/https://bugzilla.mozilla.org/show_bug.cgi?id=366324#c22
 |url-status=live
 }}</ref>
|-
|[[Google Chrome]]
|{{Yes}}
|{{Yes}}
|{{Yes|4.0}}
|{{No}}<ref name="issue 19731">{{cite web|url=https://bugs.chromium.org/p/chromium/issues/detail?id=19731|title=no movement in favicon|first=chromium|last=tracker|publisher=chromium.org|access-date=11 April 2016|archive-date=18 February 2019|archive-url=https://web.archive.org/web/20190218043222/https://bugs.chromium.org/p/chromium/issues/detail?id=19731|url-status=live}}</ref><ref name="issue 385503">{{cite web|url=https://bugs.chromium.org/p/chromium/issues/detail?id=385503|title=Animated Favicons not supported|first=chromium|last=tracker|publisher=chromium.org|access-date=8 November 2018|archive-date=8 November 2018|archive-url=https://web.archive.org/web/20181108105319/https://bugs.chromium.org/p/chromium/issues/detail?id=385503|url-status=live}}</ref>
|{{Yes|4.0}}
|{{No}}
|{{Yes|80}}<ref name="chromiumdev">{{cite web|url=https://www.chromestatus.com/feature/5180316371124224|title=Support for SVG in favicons - Chrome Platform Status|access-date=16 January 2020|date=19 November 2019|archive-date=4 January 2020|archive-url=https://web.archive.org/web/20200104094844/https://www.chromestatus.com/feature/5180316371124224|url-status=live}}</ref>
|-
|[[Internet Explorer]]
|{{Yes|5.0}}<ref name="jeffdavis" />
|{{Yes|11.0}}<ref name="ericlaw-1">{{cite web|url=https://docs.microsoft.com/en-us/archive/blogs/ieinternals/fun-with-favicons|author=Eric Lawrence|title=Fun with Favicons|publisher=Microsoft|access-date=25 June 2022|date=7 September 2013|archive-url=https://web.archive.org/web/20210523231631/https://docs.microsoft.com/en-us/archive/blogs/ieinternals/fun-with-favicons|archive-date=23 May 2021}}</ref>
|{{Yes|11.0}}<ref name="ericlaw-1" />
|{{No}}<ref name="jeffdavis" />
|{{No}}<ref name="jeffdavis" />
|{{No}}<ref name="jeffdavis" />
|{{No}}<ref name="svg-request-ie">{{cite web|url=https://connect.microsoft.com/IE/feedback/details/782416/svg-favicon-support|title=SVG favicon support.|publisher=Microsoft Connect|access-date=2014-09-04|date=2013-05-03|archive-date=21 June 2016|archive-url=https://web.archive.org/web/20160621171353/https://connect.microsoft.com/IE/feedback/details/782416/svg-favicon-support|url-status=live}}</ref>
|-
|[[Opera (web browser)|Opera]]
|{{Yes|7.0}}<ref name="opera7">{{cite web|url=http://www.opera.com/docs/changelogs/windows/700/|title=Opera 7 for Windows Changelog|publisher=Opera Software|access-date=28 February 2011|date=28 January 2003<!--Date given at: http://www.opera.com/docs/history/#o70-->|archive-date=21 January 2012|archive-url=https://web.archive.org/web/20120121030754/http://www.opera.com/docs/changelogs/windows/700/|url-status=live}}</ref>
|{{Yes|7.0}}<ref name="opera7" />
|{{Yes|7.0}}<ref name="opera7" />
|{{Yes|7.0}}<ref name="opera7" />
|{{Yes|7.0}}<ref name="opera7" />
|{{Yes|9.5}}
|{{Yes|44.0}}<ref>{{cite web|url=https://dev.opera.com/blog/opera-46/#svg-favicons|title=What's new in Opera|publisher=Opera Software|access-date=24 June 2017|archive-date=28 March 2019|archive-url=https://web.archive.org/web/20190328132133/https://dev.opera.com/blog/opera-46/#svg-favicons|url-status=live}}</ref>
|-
|[[Safari (web browser)|Safari]]
|{{Yes}}
|{{Yes|4.0}}
|{{Yes|4.0}}
|{{No}}
|{{Yes|4.0}}
|{{No}}
|{{Partial|Non-standard (12.0)}}{{efn|Safari, since version 12.0, supports single-color SVG favicons in some cases in a non-standard [[#mask-icon|<code>mask-icon</code>]] format.}}<ref>{{cite web|url=https://webkit.org/blog/8327/|title=Safari Technology Preview 58, with Safari 12 Features, is Now Available|publisher=WebKit|access-date=3 March 2019|date=6 June 2018|archive-date=6 March 2019|archive-url=https://web.archive.org/web/20190306042919/https://webkit.org/blog/8327/|url-status=live}}</ref><ref>{{cite web|url=https://blog.iconfactory.com/2018/06/favicons-finally/|title=Favicons. Finally.|publisher=Iconfactory|access-date=3 March 2019|date=7 June 2018|archive-date=1 July 2019|archive-url=https://web.archive.org/web/20190701204430/https://blog.iconfactory.com/2018/06/favicons-finally/|url-status=live}}</ref>
|}Additionally, such icon files can be 16×16, 32×32, 48×48, or 64×64 [[pixel]]s in size, and 8-bit, 24-bit, or 32-bit in [[color depth]].<ref name="egressive" /><ref name="photoshop">{{cite web|url=http://www.photoshopsupport.com/tutorials/jennifer/favicon.html|title=Favicon&nbsp;— How To Create A Favicon.ico|first=Jennifer|last=Apple|publisher=Photoshopsupport.com|access-date=25 February 2011|archive-date=12 October 2004|archive-url=https://web.archive.org/web/20041012073132/http://www.photoshopsupport.com/tutorials/jennifer/favicon.html|url-status=live}}</ref> The [[ICO (file format)|ICO file format]] article explains the details for icons with more than 256 colors on various [[Microsoft Windows]] platforms.

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

{| class="wikitable" style="text-align: center;"
|-
! Browser
! Address bar
! Address bar drop-down list
! Links bar
! Bookmarks
! Tabs
! Drag to desktop
|-
|Edge
|{{No}}
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}}
|-
|Firefox
|{{Yes-No|1.0–12.0: Yes<ref name="faviconic">{{cite web|date=11 December 2007|first=Lewis|last=Francis|title=Chart of modern browser support for favicon|url=http://informationgift.com/ud/faviconic/|access-date=23 February 2011|publisher=informationgift.com|archive-date=10 October 2019|archive-url=https://web.archive.org/web/20191010131602/http://www.informationgift.com/ud/faviconic/|url-status=live}}</ref><br />&gt; v13: No<ref>{{cite web |url=https://www.engadget.com/2012/04/24/mozilla-firefox-favicons-security-risk-banishes-from-address-bar/ |title=Firefox deems favicons risky, banishes them from address bar |work=Engadget |access-date=2012-09-10 |archive-date=19 September 2018 |archive-url=https://web.archive.org/web/20180919065118/https://www.engadget.com/2012/04/24/mozilla-firefox-favicons-security-risk-banishes-from-address-bar/ |url-status=live }}</ref>}}
|{{Yes}}
|{{Yes}}
|{{Yes}}<ref name="faviconic" />
|{{Yes}}<ref name="faviconic" />
|{{Yes}}<ref name="faviconic" />
|-
|Google Chrome
|{{No}}<ref name="faviconic" />
|{{No}}
|{{Yes}}<ref name="faviconic" />
|{{Yes}}<ref name="faviconic" />
|{{Yes|1.0}}<ref name="faviconic" />
|{{No}}<ref name="faviconic" />
|-
|Internet Explorer
|{{Yes|7.0}}<ref name="faviconic" />
|{{No}}
|{{Yes|5.0}}<ref name="faviconic" />
|{{Yes|5.0}}<ref name="faviconic" />
|{{Yes|7.0}}<ref name="faviconic" />
|{{Yes|5.0}}<ref name="faviconic" />
|-
|Opera
|{{Yes-No|7.0–12.17: Yes<br />&gt; v14: No}}<ref name="faviconic" />
|{{No}}
|{{Yes|7.0}}<ref name="faviconic" />
|{{Yes|7.0}}<ref name="faviconic" />
|{{Yes|7.0}}<ref name="faviconic" />
|{{Yes|7.0}}<ref name="faviconic" />
|-
|Safari
|{{Yes}}<ref name="faviconic" />
|{{Yes}}
|{{No}}<ref name="faviconic" />
|{{Yes}}<ref name="faviconic" />
|{{Yes-No|1.0–8.0: Yes<br />9.0–11.0: No<br />&gt; 12.0: Optional}}<ref>{{cite web|publisher=iDownloadBlog|access-date=2020-10-14|url=https://www.idownloadblog.com/2018/06/14/safari-favicons-tutorial/|title=How to enable favicons in Safari so you can identify websites in tabs graphically|date=2018-06-14|archive-date=23 October 2020|archive-url=https://web.archive.org/web/20201023221059/https://www.idownloadblog.com/2018/06/14/safari-favicons-tutorial/|url-status=live}}</ref>
|{{No}}<ref name="faviconic" />
|}

[[Opera Software]] added the ability to change the favicon in the [[Features of the Opera web browser#Speed Dial|Speed Dial]] in [[Opera 10]].<ref>{{cite web|publisher=Opera Software|access-date=27 February 2011|url=http://www.opera.com/docs/changelogs/windows/1000b2/|title=Opera 10.0 beta 2 for Windows changelog|date=16 July 2009|archive-date=27 July 2017|archive-url=https://web.archive.org/web/20170727053624/http://www.opera.com/docs/changelogs/windows/1000b2/|url-status=live}}</ref>

=== How to use ===
This table illustrates the different ways the favicon can be recognized by the web browser.  The standard implementation uses a [[Link relation|link element]] with a [[Rel attribute|<code>rel</code> attribute]] in the [[HEAD tag|<code><nowiki><head></nowiki></code>]] section of the document to specify the file's format, name and location.

{| class="wikitable sortable" style="text-align: center;"
|-
!
! Edge
! Firefox
! Google Chrome
! Internet Explorer
! Opera
! Safari
|-
! style="text-align: left" | <syntaxhighlight lang="html"><link rel="shortcut icon"
 href="https://example.com/myicon.ico"></syntaxhighlight>
|{{Yes}}<ref name="msdn" />
|{{Yes}}<ref name="msdn" />
|{{Yes}}<ref name="msdn" />
|{{Yes}}<ref name="msdn" /><ref name="jeffdavis" />
|{{Yes}}<ref name="msdn" />
|{{Yes}}
|-
! style="text-align: left" | <syntaxhighlight lang="html"><link rel="icon"
 type="image/vnd.microsoft.icon"
 href="https://example.com/image.ico"></syntaxhighlight>
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}} (from IE 9)<ref name="ericlaw-1" />
|{{Yes}}
|{{Yes}}
|-
! style="text-align: left" | <syntaxhighlight lang="html"><link rel="icon" type="image/x-icon"
 href="https://example.com/image.ico"></syntaxhighlight>
|{{Yes}}<ref name="msdn" />
|{{Yes}}<ref name="msdn" />
|{{Yes}}<ref name="msdn" />
|{{Yes}} (from IE 9)<ref name="ericlaw-5">{{cite web|url=http://blogs.msdn.com/b/ieinternals/archive/2011/02/11/ie9-release-candidate-minor-changes-list.aspx|title=IE9 RC Minor Changes List|publisher=Microsoft|access-date=16 November 2013|date=11 February 2011|archive-date=18 October 2015|archive-url=https://web.archive.org/web/20151018211508/http://blogs.msdn.com/b/ieinternals/archive/2011/02/11/ie9-release-candidate-minor-changes-list.aspx|url-status=live}}</ref>
|{{Yes}}<ref name="msdn" />
|{{Yes}}
|-
! style="text-align: left" | <syntaxhighlight lang="html"><link rel="icon"
 href="https://example.com/image.ico"></syntaxhighlight>
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}} (from IE 11)<ref name="ericlaw-1" />
|{{Yes}}
|{{Yes}}
|-
! style="text-align: left" | <syntaxhighlight lang="html"><link rel="icon" type="image/gif"
 href="https://example.com/image.gif"></syntaxhighlight>
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}} (from IE 11)<ref name="ericlaw-1" />
|{{Yes}}
|{{Yes}}
|-
! style="text-align: left" | <syntaxhighlight lang="html"><link rel="icon" type="image/png"
 href="https://example.com/image.png"></syntaxhighlight>
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}} (from IE 11)<ref name="ericlaw-1" />
|{{Yes}}
|{{Yes}}
|-
! style="text-align: left" | <syntaxhighlight lang="html"><link rel="icon" type="image/svg+xml"
 href="https://example.com/image.svg"></syntaxhighlight>
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{Yes}}
|{{No}}
|-
! style="text-align: left" | {{Anchor|mask-icon}}<syntaxhighlight lang="html"><link rel="mask-icon"
 href="https://example.com/image.svg" color="red"></syntaxhighlight>
|{{No}}
|{{No}}
|{{No}}
|{{No}}
|{{No}}
|{{Yes}}<ref>{{cite web|url=https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html|title=Creating Pinned Tab Icons|access-date=9 April 2019|date=12 December 2016|publisher=Apple Inc.|archive-date=9 December 2019|archive-url=https://web.archive.org/web/20191209204240/https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html|url-status=live}}</ref>
|-
!<code>favicon.ico</code> located in the website's root
|{{Yes}}{{citation needed|date=November 2022}}
|{{Optional}}{{efn|Firefox only accepts <code>favicon.ico</code> in the website's root without a <code>&lt;link&gt;</code> tag if the setting <code>browser.chrome.site_icons</code> is set to <code>true</code> in <code>about:config</code>. The default value is <code>true</code>. If set to <code>false</code>, these favicons are ignored.}}
|{{Yes}}
|{{Yes}}
|{{Optional}}{{efn|Opera loads <code>/favicon.ico</code> only if <code>Multimedia/Always load favicon</code> option in <code>opera:config</code> is set to <code>1</code>. See [http://www.opera.com/support/usingopera/operaini/#multimedia Opera Support page] for more details.}}
|{{Yes}}
|-
!precedence: prefer root or (X)HTML linked version
|linked<ref name="faviconic" />
|linked<ref name="faviconic" />
|linked<ref name="faviconic" />
|linked<ref name="faviconic" />
|{{dunno}}
|{{dunno}}
|}
{{notelist}}

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, Chrome 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 at random.<ref>{{cite web|url=http://www.jonathantneal.com/blog/understand-the-favicon|title=Understand the Favicon|access-date=30 May 2013|date=16 January 2013|author=Jonathan T. Neal|archive-url=https://web.archive.org/web/20130523175450/http://www.jonathantneal.com/blog/understand-the-favicon/|archive-date=23 May 2013|url-status=dead}}</ref>

Only [[SeaMonkey]] does not fetch <code>favicon.ico</code> files in the website's root by default.<ref>{{cite web|url=https://mathiasbynens.be/notes/rel-shortcut-icon|title=rel="shortcut icon" considered harmful|access-date=15 November 2011|date=14 April 2010|author=Mathias Bynens|archive-date=7 April 2019|archive-url=https://web.archive.org/web/20190407123326/https://mathiasbynens.be/notes/rel-shortcut-icon|url-status=live}}</ref>

===HTML5 recommendation for icons in multiple sizes===
The current [[HTML5]] specification recommends specifying multiple sizes for the icons, using the attributes <code>rel="icon" sizes="''space-separated list of icon dimensions''"</code> within a <code>&lt;link&gt;</code> tag.<ref>{{cite web|title=HTML Living Standard, Section 4.6.6.6 'Link type "icon"'|url=https://html.spec.whatwg.org/multipage/semantics.html#rel-icon|access-date=2015-11-17|publisher=WHATWG|archive-date=21 December 2019|archive-url=https://web.archive.org/web/20191221150723/https://html.spec.whatwg.org/multipage/semantics.html#rel-icon|url-status=live}}</ref> 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#Type image|content type]] in the format <code>type="''file content-type''"</code> within the <code>&lt;link&gt;</code> tag.

As of [[iOS 5]], Apple mobile devices ignore the HTML5 recommendation and instead use the proprietary <code>apple-touch-icon</code> method detailed below. The [[Google Chrome]] web browser however, will select the closest matching size from those provided in the HTML headers to create 128×128 pixel [[Google Chrome#Desktop shortcuts and apps|application icons]], when the user chooses the ''Create application shortcuts...'' from the "Tools" menu.

===Home screen icons on mobile devices===
On mobile devices, users can pin web pages as shortcuts icons to their [[home screen]]. These shortcut icons look similar to regular apps and web developers can provide dedicated icons for them.

==== Apple devices ====
For [[Apple Inc.|Apple]] devices with the [[iOS (Apple)|iOS]] [[operating system]] version 1.1.3 or later, users can pin a website to the home screen using the ''Add to Home Screen'' button within the share sheet in Safari.<ref>{{cite web|url=https://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.|access-date=2010-05-27|archive-url=https://web.archive.org/web/20100604075425/http://developer.apple.com/safari/library/documentation/internetweb/conceptual/iPhoneWebAppHIG/MetricsLayout/MetricsLayout.html|archive-date=4 June 2010|url-status=dead}}</ref><ref name="applewebclip">{{cite web|url=https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4|title=Safari Web Content Guide: Specifying a Webpage Icon for Web Clip|publisher=Apple Inc.|access-date=2 June 2023|date=15 November 2010|archive-url=https://web.archive.org/web/20230520233918/https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4|archive-date=20 May 2023|url-status=live}}</ref>

This works for any website. But for iOS to display the shortcut with an icon, the website needs to supply a {{tag|link|o|attribs=rel="apple-touch-icon" ...}} in the {{tag|head|o}} 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.<ref name="allinthehead">{{cite web|url=http://allinthehead.com/retro/319/how-to-set-an-apple-touch-icon-for-any-site|access-date=11 March 2011|title=How To Set an Apple Touch Icon for Any Site|date=17 January 2008|first=Drew|last=McLellan|publisher=Allinthe head.com|archive-date=4 April 2019|archive-url=https://web.archive.org/web/20190404180846/https://allinthehead.com/retro/319/how-to-set-an-apple-touch-icon-for-any-site|url-status=live}}</ref>

The app icon sizes on the different device classes differ. The recommended sizes for the icons are 152×152 for iPads (until [[iPad 2]], released in 2011), 167×167 for iPads with Retina screens ([[IPad (3rd generation)|iPad 3]] and later) and 180×180 for iPhones. If no icon in the matching size is provided, iOS will pick the largest icon with <code>rel="apple-touch-icon"</code> and scale it automatically.<ref>{{Cite web|title=Configuring Web Applications|url=https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4|access-date=2021-07-03|website=developer.apple.com|archive-date=20 May 2023|archive-url=https://web.archive.org/web/20230520233918/https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4|url-status=live}}</ref>

; Example code<ref name=":1">{{Cite web|title=How to add a favicon to your website – The modern browser guide|url=https://loqbooq.app/blog/add-favicon-modern-browser-guide|url-status=live|access-date=2021-07-03|website=Loqbooq Blog|language=en|archive-url=https://web.archive.org/web/20210711230818/https://loqbooq.app/blog/add-favicon-modern-browser-guide|archive-date=11 July 2021}}</ref>
<syntaxhighlight lang="html"><!-- For iPad -->
 <link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png"></syntaxhighlight>

<syntaxhighlight lang="html"><!-- For iPhone -->
 <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png"></syntaxhighlight>

The icon file referenced by <code>apple-touch-icon</code> is modified to add rounded corners. On the iOS versions prior to iOS 7, a drop shadow, and reflective shine would be added, and <code>apple-touch-icon-precomposed</code> icon may be provided to instruct devices not to apply reflective shine on the image.<ref name="applewebclip" /><ref name="allinthehead" />

No HTML is required by browsers or mobile devices to retrieve these icons.<ref name="allinthehead" /> The website's root is the default location for the file <code>apple-touch-icon.png</code> (in order of priority).<ref name="applewebclip" /><ref name="allinthehead" />

==== Android devices ====
On [[Android (operating system)|Android]] devices, users can use the ''Add to home screen'' function in [[Google Chrome|Chrome]]'s tools menu to pin a web page to their home screen.

This also works for any website, but if no favicon is provided, a generic icon is used. As Android app icons are sized in 48x48 points, websites should provide favicons sized in multiples of 48x48 pixels. For modern high resolution devices, Google recommends providing icons in 192x192 pixels.<ref>{{Cite web|title=Material Design|url=https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes|access-date=2021-07-03|website=Material Design|language=en|archive-date=28 May 2018|archive-url=https://web.archive.org/web/20180528164414/https://material.io/design/iconography/product-icons.html#grid-and-keyline-shapes|url-status=live}}</ref>
;Example code<ref name=":1" />
<syntaxhighlight lang="html"><!-- For Android -->
 <link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
 <link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png"></syntaxhighlight>

Android also supports Web Manifest files, which makes it possible to integrate web sites deeper within the system. A Web Manifest is a JSON file, that specifies meta data for a progressive web app. It allows the developer to not only provide the icons but also a short name for display on the home screen as well as theme colors.<ref>{{Cite web|title=Add to Home screen - Progressive web apps (PWAs) {{!}} MDN|url=https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen|access-date=2021-07-03|website=developer.mozilla.org|language=en-US}}</ref> However, providing a web manifest file is not necessary for the ''Add to home screen'' feature to work.<ref name=":1" />

===Animated favicons===
Various browsers such as Firefox and Opera support animation of favicons. A bug report has been open for Firefox since 2001 requesting a way to disable this feature.<ref>{{cite web|url=https://bugzilla.mozilla.org/show_bug.cgi?id=111373|title=Bug 111373 - don't allow animated site icons (favicons)|date=2001-11-21|publisher=bugzilla.mozilla.org|access-date=1 June 2014|archive-date=9 October 2019|archive-url=https://web.archive.org/web/20191009165311/https://bugzilla.mozilla.org/show_bug.cgi?id=111373|url-status=live}}</ref><ref>{{cite web|url=https://news.ycombinator.com/item?id=9844389|title=Firefox Bug 111373 - don't allow animated site icons (mozilla.org)|date=7 July 2015|publisher=Hacker News|access-date=7 July 2015|archive-date=19 September 2018|archive-url=https://web.archive.org/web/20180919065152/https://news.ycombinator.com/item?id=9844389|url-status=live}}</ref>

==Limitations and criticism==
Due to the need always to 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.<ref name="heng" />

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]].<ref name="W3C">{{cite web|url=http://www.w3.org/2005/10/howto-favicon|title=How to Add a Favicon to your Site|last=Dubost|first=Karl|date=24 October 2005|publisher=World Wide Web Consortium|access-date=25 February 2011|archive-date=29 November 2019|archive-url=https://web.archive.org/web/20191129143345/http://www.w3.org/2005/10/howto-favicon|url-status=live}}</ref><ref name="jeffdavis">{{cite web|url=http://jeffcode.blogspot.com/2007/12/why-doesnt-favicon-for-my-site-appear.html|publisher=Microsoft|work=jeffdav on code|title=why doesn't the favicon for my site appear in IE7?|date=27 December 2007|first=Jeff|access-date=11 March 2013|last=Davis|archive-date=9 June 2019|archive-url=https://web.archive.org/web/20190609045927/http://jeffcode.blogspot.com/2007/12/why-doesnt-favicon-for-my-site-appear.html|url-status=live}}</ref>

Favicons are often manipulated as part of phishing or eavesdropping attacks against [[HTTPS]] web pages. 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 [[Transport Layer Security|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.<ref name="marlinspike">{{cite web|url=http://www.securitytube.net/video/157|publisher=SecurityTube|work=(see description of video)|title=Defeating Ssl Using Sslstrip (Marlinspike Blackhat)|date=21 February 2011|first=Moxie|access-date=9 July 2011|last=Marlinspike|archive-url=https://web.archive.org/web/20110713161949/http://www.securitytube.net/video/157|archive-date=13 July 2011|url-status=dead}}</ref> In order to eliminate this, some web browsers, such as Firefox or Google Chrome, display the favicon within the tab whilst displaying the security status of the protocol used to access the website beside the URL.<ref name="arstechnica.com">{{cite web|url=https://arstechnica.com/information-technology/2012/07/firefox-14-arrives-with-secure-search/|access-date=18 July 2012|title=Firefox version 14 features|date=18 July 2012|archive-date=19 September 2018|archive-url=https://web.archive.org/web/20180919065125/https://arstechnica.com/information-technology/2012/07/firefox-14-arrives-with-secure-search/|url-status=live}}</ref>

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 are not logged into the service).<ref>{{Cite web|url=https://robinlinus.github.io/socialmedia-leak/|title=Your Social Media Fingerprint|last=Linus|first=Robin|access-date=2016-10-14|archive-date=21 December 2019|archive-url=https://web.archive.org/web/20191221165804/https://robinlinus.github.io/socialmedia-leak/|url-status=live}}</ref>

In 2021, a method for [[browser tracking]] using favicons was demonstrated by researchers at the University of Illinois.<ref>{{Cite web|last=Goodin|first=Dan|date=2021-02-19|title=New browser-tracking hack works even when you flush caches or go incognito|url=https://arstechnica.com/information-technology/2021/02/new-browser-tracking-hack-works-even-when-you-flush-caches-or-go-incognito/|access-date=2021-02-21|website=Ars Technica|language=en-us|archive-date=20 February 2021|archive-url=https://web.archive.org/web/20210220180227/https://arstechnica.com/information-technology/2021/02/new-browser-tracking-hack-works-even-when-you-flush-caches-or-go-incognito/|url-status=live}}</ref>

==References==
{{reflist}}

==External links==
{{Wiktionary}}
{{Commonscat}}
* [https://www.w3.org/2005/10/howto-favicon W3C web standards organization on how to add a Favicon]
* [https://patents.google.com/patent/US20090313579A1/en Systems and Methods Involving Favicons] 2008 patent application
{{web browsers}}

[[Category:Favicons| ]]
[[Category:1999 neologisms]]
[[Category:Computer icons]]
[[Category:Internet properties established in 1999]]
[[Category:Web design]]
[[Category:Website logos]]