Skip to main content

Favicon

Favicon 由 favorite 和 icon 组成。

作用​

  • 提升用户关注
  • SEO
    • 浏览器默认请求 favicon 没有的话返回 404 影响 SEO
  • 简化视觉识别
  • 提升品牌信任

可以用 SVG 代替 .ico 文件，两种方式都引入做兼容。

<link rel="icon" href="./icons/favicon.ico" sizes="any" />
<link rel="icon" href="./icons/favicon.svg" type="image/svg+xml" />

可以在 SVG 文件中增加 class，然后用媒体查询修改图标的样式

@media (prefers-color-scheme: dark) {
  .favicon-smiley { fill: #FFFF00 }
  .notification-background{ fill: #FFC300 }
}