Favicon 生成器｜一键生成多尺寸 ICO 与 PNG

不在 HTML 中写任何一行，只把 /favicon.ico 放到文档根目录即可。浏览器会隐式查找该路径，因此这样就能显示。

your-site/
└── favicon.ico   ← 放在这里即可（无需在 HTML 中书写）

<!-- 若要显式声明，仅这一行就够了 -->
<link rel="icon" href="/favicon.ico" sizes="any">

在 ICO 之外再准备 PNG 与 Apple Touch Icon，是目前最常见的配置。从桌面浏览器到 iOS 添加到主屏幕都能覆盖。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

添加到主屏幕后能像应用一样启动的 PWA，需要在 site.webmanifest 中登记图标。若 192px 与 512px 未同时齐备，则不会被判定为可安装。

<!-- HTML（head 内） -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- site.webmanifest -->
{
  "name": "My Site",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

SVG favicon 与分辨率无关，并可通过 SVG 内的 CSS 切换深色模式下的颜色。为不支持的浏览器一并声明 ICO 与 PNG。

<!-- HTML（head 内）。浏览器会自上而下采用「能读懂的那个」 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- favicon.svg（深色模式下反转颜色的示例） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

图标放在根目录以外时的写法，以及替换后仍显示旧图标时的处理。Favicon 会被浏览器牢牢缓存，改变 URL 是最可靠的办法。

<!-- 放在任意目录时需要显式写明路径 -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">

<!-- 在子目录下公开的站点（例如 /docs/）请注意绝对路径 -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">