标签：兼容 游览器 笔记 Favicon HTML https favicon png icon

如果不要兼容旧的游览器，那么就按照 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

 

标签：兼容,游览器,笔记,Favicon,HTML,https,favicon,png,icon
来源： https://www.cnblogs.com/stooges/p/15196675.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。