6

When a website provides more than one favicon link tag, what kind of rules does a browser take to determine which icon to be actually used?

For example, the html src of IMDB includes following snippet:

<link href="https://m.media-amazon.com/images/G/01/imdb/images/safari-favicon-517611381._CB483525257_.svg" mask="" rel="icon" sizes="any">
<link rel="icon" type="image/ico" href="https://m.media-amazon.com/images/G/01/imdb/images/favicon-2165806970._CB470047330_.ico">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/x-icon" href="https://m.media-amazon.com/images/G/01/imdb/images/desktop-favicon-2165806970._CB484110913_.ico">
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-4151659188._CB483525313_.png" rel="apple-touch-icon"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-76x76-53536248._CB484146059_.png" rel="apple-touch-icon" sizes="76x76"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-120x120-2442878471._CB483525250_.png" rel="apple-touch-icon" sizes="120x120"> 
<link href="https://m.media-amazon.com/images/G/01/imdb/images/mobile/apple-touch-icon-web-152x152-1475823641._CB470042035_.png" rel="apple-touch-icon" sizes="152x152">

Which icon is selected and what does other ones used for?

I noticed that the one with rel="shortcut icon" is always set as highest priority. If so, what will a browser do with a webpage with multiple shortcut icon tag?

SanKo
  • 91
  • 1
  • 8

2 Answers2

2

What will a browser do with a webpage with multiple shortcut icon tag?

I've experimentally tested that when multiple shortcut icon links are provided, as long as each link has some different attribute such as the type or size, the browser will pick the best icon depending on factors such as the screen DPI or the accepted MIME types.

As a matter of fact, I have the following snippet in the header tag of a website I made:

<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16">
<link rel="shortcut icon" href="/assets/16x16.png" type="image/png" sizes="16x16">
<link rel="shortcut icon" href="/assets/32x32.png" type="image/png" sizes="32x32">

I've noticed that every modern browser will pick the PNG version of the icon. In fact, I haven't seen any usages of the MS-ICO version of the icon, although I haven't tested if older browsers (such as older versions of IE) will pick the ICO version over the PNG version.

When a HiDPI screen is used, I've noticed the 32x32 version will be picked in order to be presented as a 16x16@2x favicon in the tab. Otherwise, the 16x16 version will be picked. Moving the browser window from a HDPI to a non-HDPI browser window will make the browser re-evaluate the current favicon and if needed, it will change it.

danirod
  • 340
  • 4
  • 14
  • 1
    Google Chrome currently picks an ICO favicon (but not a PNG favicon) over an SVG favicon even when given the `alternate` prefix: https://stackoverflow.com/questions/63429240/chromium-seems-to-display-ico-instead-of-svg-favicon – Kaspar Etter Aug 18 '20 at 16:12
0

The proper link relation (link rel="") for creating a bookmark icon doesn't include the word "shortcut" . According to this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

There are some sites which don’t even declare an icon. All browsers will simply check for a (favicon.ico) file at the root level of your website.

Shortcut is simply a workaround to designate an icon that is not named favicon.ico.

i.e You will have to use “shortcut” if you need multiple icons for various pages or subdomains. (also you need to specify a path to a specific ICO file.)

<link rel="shortcut icon" href="path/to/icon.ico" />
harshit pandey
  • 126
  • 6