HTML 网站图标

Favicon（favorite icon）是显示在浏览器标签页、书签栏和历史记录中的小图标。它是网站品牌识别的重要组成部分。

基本设置

在 <head> 中添加 <link> 标签：

html

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

现代 Favicon 方案

现代网站通常在根目录放一个 favicon.ico（浏览器会自动查找），但推荐显式声明以支持更多格式和场景：

html

<head>
  <!-- 标准 favicon (SVG 最佳) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- 备选 PNG favicon -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

  <!-- Apple Touch Icon (iOS 主屏幕) -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

  <!-- Android Chrome -->
  <link rel="manifest" href="/site.webmanifest">
</head>

各尺寸用途

尺寸	用途
16×16	浏览器标签页、收藏夹
32×32	大多数浏览器标签页的高清版本
180×180	iOS 添加到主屏幕
192×192	Android 添加到主屏幕
512×512	PWA 启动画面

SVG favicon 是现代最佳选择——矢量格式无限缩放、文件小、支持暗色模式（通过 CSS media query）。所有现代浏览器都支持。

暗色模式 Favicon

SVG favicon 可以使用 CSS 媒体查询适配暗色模式：

html

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

xml

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: black; }
    @media (prefers-color-scheme: dark) {
      path { fill: white; }
    }
  </style>
  <path d="..."/>
</svg>