实现浏览器Image类ICO支持：如何选择加载的位图？

你猜测的算法逻辑是正确的：主流浏览器加载ICO文件时，核心选择逻辑为先找出文件中尺寸最大的图像，再选择该尺寸下第一个出现的图像。

你的测试案例验证 #

• Apple的favicon包含尺寸序列[32,16,32,16]，最大尺寸为32，第一个出现的32像素图像被选中，与Chrome/Safari行为一致；
• GitHub的favicon包含尺寸序列[16,32]，最大尺寸为32，第二个图像符合要求，因此被选中；
• Windows98Scaled Icon 02.ico的尺寸序列中最大尺寸为256，第一个出现的256像素图像是第三个，与浏览器选择结果匹配。

标准与参考依据 #

ICO格式的基础规范来自微软的官方定义，但浏览器生态形成了统一的实现共识：

1. 优先筛选出ICO文件中所有图像里像素尺寸最大的（ICO中图标宽高通常等比例，取宽/高的最大值即可）；
2. 在所有最大尺寸的图像项中，选取在文件目录表中第一个出现的条目。

你当前用于测试的代码：

const img = new Image()

img.src = 'test.ico'

img.onload = () => {
  console.log(img.width, img.height)
  document.body.append(img)
}

内容的提问来源于stack exchange，提问作者Linus Unnebäck