HTML Favicon：用 link rel=icon 添加网站图标

如何添加 favicon

把图标保存到网站上，然后在 <head> 中用 <link rel="icon"> 标签指向它：

<link rel="icon" href="/favicon.ico">

对于一个基础网站，这就是全部答案。href 可以指向 .ico、.png 或 .svg 文件。下面的示例把 SVG 作为 data URI 直接写进 href，所以不需要单独的文件。嵌在另一个页面里的预览无法修改你的浏览器标签页，所以脚本在一个模拟标签页里画出同一个图标，并显示三种尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

在 16 像素下，只够放一个粗体字母或一个简单形状，细节都会消失。先按最小尺寸设计图标。把 fill='%232563eb' 改成别的颜色（%23 是 URL 编码后的 #），每个副本都会随之更新。

需要提供哪些文件

浏览器、手机和应用启动器会寻找不同的图标。下面这一小组文件就能全部覆盖：

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

页面没有图标链接时，大多数浏览器也会自动向网站根目录请求 /favicon.ico，所以在那里放一个 favicon.ico 是很实用的默认做法。sizes 属性告诉浏览器每个文件的尺寸，让它挑选最合适的一个。请用 rel="icon"；旧的 rel="shortcut icon" 之所以还能用，只是因为浏览器会忽略多出来的那个词。

emoji favicon

做原型或个人页面时，用 emoji 能快速做出一个 favicon。把它放进 SVG 的 <text> 元素里：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA 是 URL 编码后的饼干 emoji。emoji 由操作系统的 emoji 字体绘制，所以在 Windows、macOS 和 Android 上看起来各不相同；对于正式产品，专门设计的图标是更好的选择。

跟随深色模式的图标

SVG favicon 可以自带 CSS，包括 prefers-color-scheme 媒体查询，所以浏览器使用深色主题时，深色图标可以变成浅色：

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

用 JavaScript 修改 favicon

网站会用变化的 favicon 显示通知小红点或状态颜色。在 <canvas> 上画出新图标，再把链接的 href 设为画布图像：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

在 Chrome 或 Firefox 的真实页面中，每次设置 href，标签页图标都会改变，时机和这里预览图片的变化完全一样。

常见错误

• 路径错误。 href="favicon.ico" 是相对于当前页面的，所以在 /blog/post 上会失效。请用根路径：href="/favicon.ico"。
• 以为更新会立即显示。 浏览器会牢牢缓存 favicon。替换图标后，清除缓存重新加载，或者修改 URL（/favicon.ico?v=2）。
• 把细节丰富的标志缩小到 16 像素。 把它简化：一个字母或一个形状，对比要强烈。
• 只提供 SVG。 同时保留 ICO 或 PNG，供不支持 SVG favicon 的浏览器使用，并为 iOS 加上 apple-touch-icon。
• 把链接放在 <body> 里。 把它和 title 标签及其他元数据一起放在 <head> 中。