浏览器如何选择多尺寸Favicon图标？我的图标声明后出现选择异常问题求助

我为网站制作了两个favicon图标，一个是16×16尺寸，另一个是32×32及更大尺寸。我针对不同场景（比如标签页图标、常访问页面图标等）做了多种尺寸的版本，以下是预览图：

• 16×16
• 32×32

但刷新页面时，Mozilla Firefox并没有固定选择16×16的图标，而是随机选择，情况如下：

• 我想要的效果（偶尔会出现）
• 我不想要的效果（偶尔会出现）

这个问题在本地环境和线上环境都存在。另外注意，在Google Chrome（以及其他基于Chromium的浏览器）中，它只会选择32×32的图片，即使预览区域的实际尺寸是16×16。

以下是我在<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">

谢谢大家！

备注：内容来源于stack exchange，提问作者Ivaalo