Necessary to add link tag for favicon.ico?

html favicon

Are there any modern browsers that won't detect the favicon.ico automatically? Is there any reason to add the link tag for favicon.ico?

<link rel="shortcut icon" href="/favicon.ico">

My guess is that it's only necessary to include it in the HTML document if you decide to go with GIF or PNG...

I've never seen that any browser had needed it. Do you have any examples?

I can name some browsers that have preference settings whether or not to go look for favicon.ico automatically. So if you want to be sure that your icon shows up, better include a link in your HTML. By the way, .png files are usually smaller than comparable .ico files.

Please name some Mr Lister :) No shark555, I can't name any...

Firefox (and other Gecko based browsers like SeaMonkey) has several settings to fine-tune its behaviour. browser.chrome.favicons set to true will look for favicon.ico in the root; if false, it will only load an icons if specified in the HTML page. See kb.mozillazine.org/Browser.chrome.favicons and related pages.

Possible duplicate of Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?

Jeroen

To choose a different location or file type (e.g. PNG or SVG) for the favicon:
One reason can be that you want to have the icon in a specific location, perhaps in the images folder or something alike. For example:

<link rel="icon" href="_/img/favicon.png">

This diferent location may even be a CDN, just like SO seems to do with <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

To learn more about using other file types like PNG check out this question.

For cache busting purposes: Add a query string to the path for cache-busting purposes:

<link rel="icon" href="/favicon.ico?v=1.1">

Favicons are very heavily cached and this a great way to ensure a refresh.

Footnote about default location:
As far as the first bit of the question: all modern browsers would detect a favicon at the default location, so that's not a reason to use a link for it.

Footnote about rel="icon":
As indicated by @Semanino's answer, using rel="shortcut icon" is an old technique which was required by older versions of Internet Explorer, but in most cases can be replaced by the more correct rel="icon" instruction. The article @Semanino based this on properly links to the appropriate spec which shows a rel value of shortcut isn't a valid option.

Should this go in the <head> tag?

@MaxWilliams Yes. (See "Permitted parent elements" in the MDN docs or "Contexts" in the W3 spec).

It's 2016 - and Chrome still (or again?) is not recognizing the default favicon.ico in the root if you specifiy also other icons...

Semanino

Please note that both the HTML5 specification of W3C and WhatWG standardize

<link rel="icon" href="/favicon.ico">

Note the value of the "rel" attribute!

The value shortcut icon for the rel attribute is a very old Internet Explorer specific extension and deprecated.

So please consider not using it any more and updating your files so they are standards compliant and are displayed correctly in all browsers.

You might also want to take a look at this great post: rel="shortcut icon" considered harmful

Not quite "deprecated" (it was never actually part of any spec). However, the HTML5 spec states, "For historical reasons, the icon keyword may be preceded by the keyword "shortcut". If the "shortcut" keyword is present, it must be come immediately before the icon keyword and the two keywords must be separated by only a single U+0020 SPACE character." Also note that, "There is no default type for resources given by the icon keyword."

xgqfrms

It all depends on which format of image you like to use! if you have an icon of your website, it will be much better for UX!

demo

show logo in the browser tab

https://i.stack.imgur.com/wdE8C.png

iconhandbook.co.uk/reference/examples/favicons links: mathiasbynens.be/notes/rel-shortcut-icon#comments links: html.spec.whatwg.org/multipage/semantics.html#rel-icon links:

UX has nothing to do with this.

@paddotk what I mean is that the user can easily tell which tab belongs to the target website when open multi-tabs in the browser if there is a favicon icon shows in the tab.

zennni

Update Oct 2020:

So if you are on this page scratching your head🤔 why my favicon is not working , then read along. I tried all the things (which I supposedly thought I was doing right) yet favicon was not showing up on browser tabs.

Here is one line simple cracker code that worked flawlessly:

<link rel="icon" href="https://abcde.neocities.org/bla123.jpg" size="16x16" type="image/jpg">

https://i.stack.imgur.com/hWTEJ.png

Notes:

Put the image in the ROOT folder ( In one of my unsuccessful attempts , I was not using root dir) Use direct favicon url link ( instead of href="images/bla123.jpg"). I placed this tag just below the tag in the <Header> I made the favicon size 64x64 px and size was 2.16 KB </p> <p class="mb-0 text-dark "> I tested it on Firefox, Chrome, Edge, and opera. OS: Win 10, Mac OSX, ios and Android .Also I did not experience any cashing issues, worked pretty much as soon as I refreshed the page. </p> <hr class="my-4"> <div> <div class="comment"> <div class="p-3 mb-2 bg-light border rounded"> Confirming that favicon size indeed makes a difference </div> </div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">A</span> </span></div> <div class=" ms-3 w-100"> <small>Abhilash KK</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> We can add for all devices with platform specific size </p> <pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="fav_icons/android-icon-192x192.pn"> <link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png"> </code></pre> <hr class="my-4"> <div> </div> </div> </div> </div> </div> </div> <div class="d-flex mb-4"> <div><span class="avatar avatar-md avatar-success"> <span class="avatar-initials rounded-circle">a</span> </span></div> <div class=" ms-3 w-100"> <small>animuson</small> <div class="d-flex w-100">  <div class="card mt-2 rounded bg-light w-100"> <div class="card-body p-3"> <p class="mb-0 text-dark "> The bottom line is not all browsers will actually look for your favicon.ico file. Some browsers allow users to choose whether or not it should automatically look. Therefore, in order to ensure that it will always appear and get looked at, you do have to define it. </p> <hr class="my-4"> <div> <div class="comment"> <div class="p-3 mb-2 bg-light border rounded"> Thanks for your comment animuson. Can you name some browsers that wont look automaticly? </div> <div class="p-3 mb-2 bg-light border rounded"> @user1087110: I don't know any off the top of my head, and honestly who cares. The point is you can't assume it will and you need to account for those that won't. </div> <div class="p-3 mb-2 bg-light border rounded"> Since it is not relevant anymore, you can delete your answer to clean up the page. </div> </div> </div> </div> </div> </div> </div> </div> </p> </div> </div> <div class="col-xl-3"> <div class="d-flex flex-row justify-content-start align-items-center bg-light mb-3 mt-8 py-2 rounded"> <div class="flex-fill"> <span class="avatar avatar-xl "> <img src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/images/brand/qrcode_for_gh.jpg?t=20230125' class="rounded w-100 mx-2" alt="关注公众号,不定期副业成功案例分享"/> </span> </div> <div class="flex-fill text-left"> <div class="mx-1"> <h5 class="mb-2 mt-3 ">Follow WeChat</h5> <p>Success story sharing</p> </div> </div> </div> <div class="card card-bordered mb-0 card-hover cursor-pointer"> <div class="card-body"> <h4 class="py-2"> Want to <span class="text-danger">stay one step ahead</span> of the latest teleworks? </h4> <a type="button" class="btn btn-sm btn-outline-primary rounded-pill w-100" href="/admin/payments.html" >Subscribe Now</a> </div> </div> <div class="mt-2 cursor-pointer"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8339074668991438" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8339074668991438" data-ad-slot="7889891166" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card mb-4 mt-4 border"> <div>  <div class="card-header"> <h4 class="mb-0">相似问题</h4> </div> <ul class="list-group list-group-flush"> <li class="list-group-item bg-transparent"> <a href="/qa/3MnJ">When is a CDATA section necessary within a script tag?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/la93">What are valid values for the id attribute in HTML?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/gadV">How to prevent favicon.ico requests?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/038r">favicon.png vs favicon.ico - why should I use PNG instead of ICO?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/Ld5n">How do I create an HTML button that acts like a link?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/wWyo">How to add a browser tab icon (favicon) for a website?</a> </li> <li class="list-group-item bg-transparent"> <a href="/qa/XZD1">Cannot display HTML string</a> </li> </ul> </div> </div> </div> </div> </div> </div>  <div class="pt-lg-5 pt-3 footer bg-white"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6 col-12"> <div class="mb-4"> <img src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/images/brand/logo/logo.png?t=20230125' style="width:30%"> <div class="mt-4"> <p> HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable. </p> <div class="fs-4 mt-4"> <div class="btn-group dropup"> <button type="button" class="btn btn-primary dropdown-toggle fe fe-globe " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> English </button> <div class="dropdown-menu"> <a class="dropdown-item" href="https://www.huntsbot.com/qa/aP7q?lang=zh_CN"> 简体中文 </a> <a class="dropdown-item" href="https://www.huntsbot.com/qa/aP7q?lang=en_US"> English </a> </div> </div> </div> </div> </div> </div> <div class="offset-lg-1 col-lg-2 col-md-3 col-6 hidden-less750"> <div class="mb-4"> <h3 class="fw-bold mb-3"> Platform </h3> <ul class="list-unstyled nav nav-footer flex-column nav-x-0"> <li> <a href="/telework.html" class="nav-link"> Outsource </a> </li> <li> <a href="/remote-job.html" class="nav-link"> Remote Job </a> </li> <li> <a href="/products.html" class="nav-link"> Products </a> </li> <li> <a href="/weekly.html" class="nav-link"> Newsletter </a> </li> <li> <a href="/pages/price.html" class="nav-link"> Pricing </a> </li> </ul> </div> </div> <div class="col-lg-2 col-md-3 col-6 hidden-less750"> <div class="mb-4"> <h3 class="fw-bold mb-3"> Support </h3> <ul class="list-unstyled nav nav-footer flex-column nav-x-0"> <li> <a href="/pages/about.html" class="nav-link"> About </a> </li> <li> <a href="/pages/faq.html" class="nav-link"> Frequently Asked Questions </a> </li> <li> <a href="/pages/faq.html" class="nav-link"> How to subscribe </a> </li> </ul> <h3 class="fw-bold my-3"> Links </h3> <ul class="list-unstyled nav nav-footer flex-column nav-x-0"> <li> <a href="https://tlr.xinbeitime.com/" class="nav-link" target="_blank"> 网球实时排名 </a> </li> <li> <a href="https://snapvideotools.com/" class="nav-link" target="_blank"> SnapVideoTools </a> </li> <li> <a href="https://tennisliveranking.com/" class="nav-link" target="_blank"> ATP/WTA/ITF Live Ranking </a> </li> </ul> </div> </div> <div class="col-lg-3 col-md-12 hidden-less750">  <div class="mb-4"> <h3 class="fw-bold mb-3"> Contact US </h3> <p> Any questions or suggestions during use, you can contact us in the following ways: </p> <p> Email: <a href="mailto:huntsbot@xinbeitime.com"> huntsbot@xinbeitime.com </a> </p> </div> </div> </div> <div class="row align-items-center g-0 border-top py-2 mt-6">  <div class="col-lg-8 col-md-7 col-12"> <span class="fs-5"> Copyright© 2022-2023 www.huntsbot.com <a href="https://beian.miit.gov.cn/" rel="noindex,nofollow" target="_blank" class="text-reset">浙ICP备2022000860号-4</a> All Rights Reserved. </span> </div>  <div class="col-lg-4 col-md-5 col-12 d-md-flex justify-content-end hidden-less750"> <nav class="nav nav-footer"> <a class="nav-link ps-0" href="/pages/disclaimer.html" target="_blank"> Disclaimer </a> <a class="nav-link px-2 px-md-3" href="/pages/privacy_policy.html" target="_blank"> Privacy Policy </a> <a class="nav-link px-2 px-md-3" href="/pages/terms_of_ervice.html" target="_blank"> Terms of Service </a> </nav> </div> </div> </div> </div>  <div class="modal fade" id="showQrCodeModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content "> <div class="modal-header"> <h5 class="modal-title " id="exampleModalLabel">微信公众号</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button> </div> <div class="modal-body"> <img src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/images/brand/qrcode_for_gh.jpg?t=20230125' class="rounded w-100" title="火星来客微信公众号" alt="火星来客微信公众号"> </div> </div> </div> </div> <div class="modal fade" id="modal-alert" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered " role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal-alert-title" >Tips</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" id="modal-alert-body"> </div> </div> </div> </div> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-alert" style="display:none" id="btn-common-alert"></button> <div class="modal fade" id="model-confirm" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-sm" role="document"> <div class="modal-content"> <div class="modal-body" id="modal-confirm-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">No</button> <button type="button" class="btn btn-primary btn-sm" id="btn-confirm-yes" btn-type="ajaxButton">Yes</button> </div> </div> </div> </div> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#model-confirm" style="display:none" id="btn-common-confirm" ></button> <script > function alertError(message){ alertError(message,"Tips"); } function alertError(message,title){ if(title){ $("#modal-alert-title").html(title); } $("#modal-alert-body").html(message); $("#btn-common-alert").trigger("click"); } function confirmDialog(confirmMessage,actionUrl,actionSuccessMsg){ $("#modal-confirm-body").html(confirmMessage); $("#btn-confirm-yes").attr("data-url",actionUrl); $("#btn-confirm-yes").attr("data-message",actionSuccessMsg); $("#btn-common-confirm").trigger("click"); } </script>   <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/libs/jquery/dist/jquery.min.js?t=20230125'></script> <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js?t=20230125'></script> <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/libs/bootstrap-select/dist/js/bootstrap-select.min.js?t=20230125'></script> <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/libs/jquery.form/jquery.form.js?t=20230125'></script> <script src='https://huntsbot-hz-assets.oss-cn-hangzhou.aliyuncs.com/huntsbot/assets/js/custom.js?t=20230125'></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?b25fc3fcffc44e8dff36dde049b4ebc1"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "fco75ff5x7"); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-BTLS35QW08"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-BTLS35QW08'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?a01aa87a04ac652b13258f439e7407fed09ba9bea51f9e0f26ab91ccc91c1924bc434964556b7d7129e9b750ed197d397efd7b0c6c715c1701396e1af40cec962b8d7c8c6655c9b00211740aa8a98e2e"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> </body> </html>