Necessary to add link tag for favicon ico

Question

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    lt link rel  shortcut icon  href   favicon ico  gt    My guess is that it s only necessary to include it in the HTML document if you decide to go with GIF or PNG

User · Answer

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

User · Answer

We can add for all devices with platform specific size   lt link rel  apple-touch-icon  sizes  57x57  href  fav icons apple-icon-57x57 png  gt   lt link rel  apple-touch-icon  sizes  60x60  href  fav icons apple-icon-60x60 png  gt   lt link rel  apple-touch-icon  sizes  72x72  href  fav icons apple-icon-72x72 png  gt   lt link rel  apple-touch-icon  sizes  76x76  href  fav icons apple-icon-76x76 png  gt   lt link rel  apple-touch-icon  sizes  114x114  href  fav icons apple-icon-114x114 png  gt   lt link rel  apple-touch-icon  sizes  120x120  href  fav icons apple-icon-120x120 png  gt   lt link rel  apple-touch-icon  sizes  144x144  href  fav icons apple-icon-144x144 png  gt   lt link rel  apple-touch-icon  sizes  152x152  href  fav icons apple-icon-152x152 png  gt   lt link rel  apple-touch-icon  sizes  180x180  href  fav icons apple-icon-180x180 png  gt    lt link rel  icon  type  image png  sizes  192x192   href  fav icons android-icon-192x192 pn  gt   lt link rel  icon  type  image png  sizes  32x32  href  fav icons favicon-32x32 png  gt   lt link rel  icon  type  image png  sizes  96x96  href  fav icons favicon-96x96 png  gt   lt link rel  icon  type  image png  sizes  16x16  href  fav icons favicon-16x16 png  gt

User · Answer

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   lt link rel  quot icon quot  href  quot https   abcde neocities org bla123 jpg quot  size  quot 16x16 quot  type  quot image jpg quot  gt   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  quot images bla123 jpg quot    I placed this tag just below the  lt title gt  tag in the  lt Header gt  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

User · Answer

lt link rel  icon  type  image x-icon  href  http   example com favicon ico    gt   lt link rel  icon  type  image png  href  http   example com favicon png    gt   lt link rel  icon  type  image gif  href  http   example com favicon gif    gt   lt link rel  icon  type  image jpeg  href  http   example com favicon jpeg    gt   lt link rel  icon  type  image webp  href  http   example com favicon webp    gt     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

User · Answer

Please note that both the HTML5 specification of W3C and WhatWG standardize   lt link rel  icon  href   favicon ico  gt    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

User · Answer

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    lt link rel  icon  href    img favicon png  gt    This diferent location may even be a CDN  just like SO seems to do with  lt link rel  shortcut icon  href  http   cdn sstatic net stackoverflow img favicon ico  gt    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     lt link rel  icon  href   favicon ico v 1 1  gt     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

[html] Necessary to add link tag for favicon.ico?

Examples related to html

Examples related to favicon

Examples related to html-head