HTML Favicon 笔记

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

  1. <title>
  2. manifest.json 里的 name
  3. meta apple-mobile-web-app-title
  4. 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:

 

posted @ 2021-08-28 14:24  泉油  阅读(381)  评论(0)  编辑  收藏  举报
Web Design Johor Bahru Malaysia - Stooges