Back

如何为您的网站添加 Favicon

OpenReplay Team OpenReplay Team

Nov 23, 2025 · 3 min read

如何为您的网站添加 Favicon

您的网站需要一个 favicon。浏览器标签页中的这个小图标不仅仅是装饰——它是用户在数十个打开的标签页中识别您网站的方式,是 Google 在搜索结果中显示您网站的方式,也是 iOS 将您的网站保存到主屏幕的方式。然而,大多数 favicon 指南都已过时,推荐的是旧版格式和不必要的文件。

本文介绍了适用于所有场景的现代化、精简的 favicon 设置:favicon SVG 用于现代浏览器,favicon PNG 用于降级支持,Apple Touch Icon 用于 iOS 设备,以及 web manifest 图标用于渐进式 Web 应用。

核心要点

  • 现代 favicon 设置只需要一小组必要文件:一个 ICO 降级文件、一个 SVG favicon、一个 32×32 PNG、一个 Apple Touch Icon,以及几个 web-manifest 图标。
  • SVG favicon 可以完美缩放,并通过 CSS 媒体查询支持深色模式
  • Safari 和 iOS 现在完全支持 SVG favicon,因此它们可以作为现代浏览器的主要图标
  • 浏览器的激进缓存策略要求在更新 favicon 时采用版本控制策略

现代 Favicon 技术栈

忘掉 2015 年那些数十种图标尺寸吧。以下是您真正需要的:

必要图标

  • favicon.ico(多尺寸,通常为 16×16 和 32×32)— 旧版降级支持
  • favicon.svg - 适用于所有现代浏览器的可缩放图标
  • icon-32.png - 浏览器界面和 Google 搜索结果
  • apple-touch-icon.png(180×180)- iOS 主屏幕
  • icon-192.png 和 icon-512.png - PWA 的 Web manifest

Safari 和 iOS 现在完全支持 SVG favicon。关于缺少 SVG 支持的说法已经过时——现在所有主流浏览器都可靠地支持 SVG favicon。

HTML 实现

在您的 <head> 中添加以下四行:

<!-- Fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico">

<!-- PNG for browser UI and Google SERPs -->
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">

<!-- Modern browsers (scales cleanly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web manifest for PWAs -->
<link rel="manifest" href="/manifest.json">

注意:跳过 rel="shortcut icon"——它自 2003 年以来就已被弃用。只需使用 rel="icon"。

创建您的图标

SVG Favicon

SVG favicon 可以无限缩放,并支持深色模式等特性:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M64 16L16 112h96z"/>
</svg>

保持 SVG favicon 简洁。复杂的渐变和效果在 16×16 像素时无法很好地渲染。

PNG Favicon

32×32 PNG 有两个关键用途:

  1. 不支持 SVG 的浏览器的降级方案
  2. 在 Google 搜索结果中显示

使用 RealFaviconGenerator 或 Favicon.io 等工具从您的 SVG 生成 PNG 版本。

Apple Touch Icon

iOS 需要一个 180×180 PNG,具有以下特点:

  • 无透明度(使用纯色背景)
  • 无圆角(iOS 会自动添加)
  • 高对比度,以便在各种壁纸上清晰可见

将其命名为 apple-touch-icon.png 并放置在根目录中。即使没有 <link> 标签,iOS 也会自动找到它,但显式链接可确保可靠性。

Web Manifest 图标

对于渐进式 Web 应用,创建一个 manifest.json:

{
  "name": "Your App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

这些 web manifest 图标可在 Android 上启用”添加到主屏幕”功能,以及桌面端的 PWA 安装。

深色模式支持

除了 SVG 媒体查询方法外,您还可以使用 JavaScript 切换 favicon:

const favicon = document.querySelector('link[rel="icon"]');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateFavicon(e) {
  favicon.href = e.matches ? '/favicon-dark.svg' : '/favicon-light.svg';
}

darkModeMediaQuery.addEventListener('change', updateFavicon);
updateFavicon(darkModeMediaQuery);

处理缓存问题

浏览器会激进地缓存 favicon。更新图标时:

  1. 版本化文件名:将 favicon.svg 更改为 favicon-v2.svg
  2. 添加查询字符串:favicon.svg?v=2
  3. 更新 HTML 中的所有引用

要立即测试,请在无痕/隐私窗口中打开您的网站。

常见问题

Favicon 不显示?

  • 检查路径——使用绝对路径(/favicon.svg)而非相对路径
  • 验证 MIME 类型:SVG 需要 image/svg+xml
  • 在无痕模式下测试以绕过缓存

在 Retina 显示屏上模糊?

  • 使用 SVG 作为主要图标
  • 确保 PNG 导出尺寸精确为 32×32 和 180×180

iOS 上显示错误的图标?

  • iOS 优先使用根目录中的 apple-touch-icon.png
  • 清除 Safari 缓存:设置 → Safari → 清除历史记录和网站数据

总结

现代 favicon 实现比旧版指南建议的更简单。五个文件——ICO、SVG、PNG、Apple Touch Icon 和 web manifest 图标——涵盖了所有浏览器、设备和使用场景。跳过过时的数十个图标集和 Windows 磁贴元数据,除非您特别需要它们。

专注于将干净的 SVG favicon 作为主要图标,添加必要的降级方案,您的网站将在从浏览器标签页到 iOS 主屏幕的任何地方完美显示。

常见问题解答

虽然 SVG favicon 在所有现代浏览器中都能工作,但您仍然需要降级方案。旧版浏览器需要 ICO 文件,iOS 需要 apple-touch-icon.png 用于主屏幕快捷方式,而 Google 搜索结果专门查找 PNG favicon。

某些浏览器会自动调整 favicon 颜色以在深色模式下保持可见性。要控制此行为,请在 SVG favicon 中使用 CSS 媒体查询,或实现基于 JavaScript 的 favicon 切换以获得一致的外观。

根据浏览器缓存,favicon 更新可能需要几小时到几天时间。通过版本化文件名或添加查询字符串来强制立即更新。即使在重新抓取后,Google 搜索结果也可能需要几周时间才能反映 favicon 更改。

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog