如果不要兼容旧的游览器，那么就按照 best practice 去做

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

 

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

 或者用工具（https://realfavicongenerator.net/）

 

和大队走

这是当你参考 apple，Microsoft 时，就会一头雾水，怎么什么都看不到，只有这个！

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

 

首先，modern 游览器会去 root folder 找 favicon，而 "shortcut icon" 在 HTML5 中没有出现。

这很可能是为了兼容旧版本（没继续查下去）

 

如何和 Apple 和 Microsoft 一样的做法，那么心中就会出现几个疑问

1. 他们向后兼容吗？兼容到那个版本？
2. Apple 向后兼容到 IOS version 几？
3. 所有的 icon 都放在 root folder, 哪不是很乱？

和大队走，看起来不难

 

向后兼容

这里我做了些笔记

• 不同的 device 需要不同大小的图片
• 建议不要使用 rel="shortcut icon", 因为游览器会误导
• W3C 不鼓励使用 URL，如果使用他的建议，那么游览器会随便找 favicon.ico 而不是 favicon.png 
• favicon.ico 只用在 IE

 

 

 

Links:

• https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
• https://realfavicongenerator.net/faq#.YSmttI4zaMq
• https://mathiasbynens.be/notes/rel-shortcut-icon
• https://html.spec.whatwg.org/multipage/links.html#linkTypes