Why is the browser making multiple favicon calls?

I have the following in my index.html for getting favicon:

<link rel="icon" href="https://cdn-xyz.favicon.png" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="192x192" href="https://cdn-xyz.favicon-192.png" type="image/x-icon" />

The first link is to a 48x48 pixel image as I want the browser to use that make the network call faster.

The second link is to a 192x192 pixel in cases when the larger size image is needed (for example on iOS add to home screen).

The problem is that both these images are fetched at the start by Firefox (other browsers don't have this issue). Why is this and what can I do to prevent this?

Solution

Looking at Firefox DevTools Network tab, both favicon requests were initiated by FaviconLoader.jsm. Looking at the code, it seems that loadIcons() loads a rich icon and a tab icon, chosen by selectIcons.

The way selectIcons chooses the best tab icon and rich icon is the following:

The tab icon is the svg icon, the smallest icon larger than 16x16 (for normal dpi), or the ico file, in order of ascending preference.
The rich icon is the largest rich icon (ie. larger than 96x96).

In your case, the 48px icon is the tab icon, and the 192px icon is the rich icon, thus the two requests.

The rich icon is probably used by Firefox for the top sites icons on the new tab page.

I don't think you can prevent this, but favicons are usually fetched by the browser after the page has loaded, so it shouldn't affect your website's performance.