How do browsers choose between multiple favicon images?

13 hours ago 2
ARTICLE AD BOX

I have created two favicons for a website. One is for 16×16, and the other is for 32×32 and higher. I have created multiple size for multiple contexts, like the tab icon, the frequently visited page icon, etc... Here are the previews:

favicon 16x16 16×16

favicon 32x32 32×32

When I refresh my page, Mozilla Firefox seems to choose one randomly as following, instead of choosing the 16×16 one:

preview of 16x16 favicon What I DO want and sometimes happens

preview of 32x32 favicon What I DON'T want and sometimes happens

This occurs locally and online. Note that in Google Chrome (and possibly other Chromium based browsers), it only chose the 32×32 image, even if the preview is technically 16×16.

Here are my declarations in the <head>:

<link rel="icon" type="image/png" href="img/IvaaloIcon-min.png" sizes="16x16"> <link rel="icon" type="image/png" href="img/IvaaloIcon.png" sizes="32x32"> <!-- The followings are rescaled versions of the 32x32 image --> <link rel="icon" type="image/png" href="img/IvaaloIconx2.png" sizes="64x64"> <link rel="icon" type="image/png" href="img/IvaaloIconx3.png" sizes="96x96"> <link rel="icon" type="image/png" href="img/IvaaloIconx4.png" sizes="128x128">

Thank you!

Read Entire Article