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...
The answer is
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" /> <link rel="icon" type="image/png" href="http://example.com/favicon.png" /> <link rel="icon" type="image/gif" href="http://example.com/favicon.gif" /> <link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" /> <link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />
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
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
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.
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">
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 <title> tag in the <Header>
- I made the favicon size 64x64 px and size was 2.16 KB
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.
We can add for all devices with platform specific size
<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">
Source: Stackoverflow.com