如果不要兼容旧的游览器，那么就按照 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" }
]
}
跟大队走
大部分的网页是 wordpress 开发的，比较多人用来处理 favicon 的是 https://realfavicongenerator.net/
这工具在 FAQ 讲解了很多细节，我列出几个我需要注意的重点
- 不要用 short cut icon
- IOS precomposed icons 就被废弃了（从 IOS 7 开始）
-
说使用 favicon 会让有些游览器会混乱
-
虽然文章有提到 favicon only for IE, 但是没有很具体说一定是给 IE
通过工具，可以做出 favicon, 还可以做 manifest
当用户 add to home 时，到底会用那个 title?
- <title>
- manifest.json 里的 name
- meta apple-mobile-web-app-title
- meta application-name
答案是如果有 manifest, 就用 manifest name
如果是 IOS 同时没有 manifest, 那么就 apple-mobile-web-app-title
如果是 window 8, 就 meta application-name
大公司怎么搞？
这是当你参考 Microsoft 时，就会一头雾水，怎么什么 favicon 都看不到? 而且只有这个！
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
因为游览器会去 root folder 找 favicon
"shortcut icon" 在 HTML5 文档中没有出现。而 realfavicongenerator 建议不要用
Links: