用ImageMagick合成多尺寸PNG为favicon.ico后，正确的HTML引用代码？

结论 #

代码2是正确且符合规范的引用方式。

对三段代码的逐一分析： #

• 代码1：

  <link rel="icon" href="/favicon.ico">
  

  这个写法是有效的，但不够规范。它仅声明了favicon的存在，却没有告知浏览器该文件包含的具体尺寸，浏览器需要自行探测文件内的图标尺寸，加载效率略低。

• 代码2：

  <link rel="icon" sizes="16x16 32x32 64x64 96x96 144x144" href="/favicon.ico">
  

  这是符合HTML规范的推荐写法。sizes属性支持通过空格分隔多个尺寸值，能准确告知浏览器该ico文件包含的所有图标尺寸，让浏览器可以根据自身场景选择最合适的尺寸加载，提升加载效率和适配性。

• 代码3：

  <link rel="icon" sizes="16x16" sizes="32x32" sizes="64x64" sizes="96x96" sizes="144x144" href="/favicon.ico">
  

  这个写法是错误的。HTML规范明确禁止在同一个元素上重复定义相同属性，多个sizes属性只会让浏览器识别最后一个值（即144x144），前面的尺寸信息都会被忽略，无法正确传递ico文件的完整尺寸信息。

内容的提问来源于stack exchange，提问作者Diezel Sali