favicon 图标

Favicon（Favorites Icon）是显示在浏览器标签页、书签、历史记录等位置的网站小图标。正确配置 favicon 能提升品牌识别度和用户体验。

前置知识

阅读本节前，建议先了解：CSS 样式引入

基础概念

什么是 Favicon

Favicon 是网站的"头像"，它出现在以下位置：

位置	说明
浏览器标签页	标签页左侧的小图标
书签栏	收藏夹中的网站图标
浏览器历史	历史记录列表中的图标
手机主屏幕	添加到主屏幕时的应用图标（apple-touch-icon）
桌面快捷方式	创建桌面快捷方式时的图标
Windows 任务栏	固定到任务栏时的图标

Favicon 的格式演进

格式	扩展名	特点	推荐程度
ICO	`.ico`	传统格式，支持多尺寸嵌入	兼容旧浏览器
PNG	`.png`	支持透明背景	推荐
SVG	`.svg`	矢量图标，任意缩放不失真	强烈推荐
WebP	`.webp`	现代图片格式	Chrome 支持较好

语法

基本配置

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网站标题</title>

  <!-- Favicon 图标配置 -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

传统 ICO 方式（兼容旧浏览器）

html

<!-- 最简方式（兼容所有浏览器） -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!-- 指定尺寸 -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

现代多尺寸配置

html

<!-- SVG 图标（推荐，现代浏览器） -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">

<!-- PNG 图标（兼容不支持 SVG 的浏览器） -->
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">

<!-- Apple Touch Icon（iOS 添加到主屏幕） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Apple Touch Icon（不同尺寸） -->
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

详细说明

各平台所需的图标尺寸

桌面浏览器

图标尺寸	用途	格式
16x16	浏览器标签页（小）	ICO / PNG
32x32	浏览器标签页（标准）	ICO / PNG
48x48	Windows 站点图标	ICO

iOS（Safari）

图标尺寸	用途	格式
120x120	iPhone（非 Retina）	PNG
152x152	iPad	PNG
167x167	iPad Pro（10.5"）	PNG
180x180	iPhone（Retina）	PNG

Android（Chrome）

图标尺寸	用途	格式
192x192	Android Chrome	PNG
512x512	PWA 启动画面	PNG

Windows

图标尺寸	用途	格式
70x70	缩小后的任务栏	PNG
144x144	中等大小磁贴	PNG
150x150	小磁贴	PNG
310x310	大磁贴	PNG

Web App Manifest 中的图标

对于 PWA（渐进式 Web 应用），还需要在 site.webmanifest 文件中声明图标：

json

{
  "name": "我的网站",
  "short_name": "我的网站",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "display": "standalone"
}

在 HTML 中引用 manifest：

html

<link rel="manifest" href="/site.webmanifest">

浏览器选择 Favicon 的优先级

浏览器按以下优先级选择要显示的 favicon：

<link rel="icon" type="image/svg+xml">（SVG 最优先）
<link rel="icon" sizes="32x32">（最匹配的尺寸）
<link rel="icon" sizes="16x16">
<link rel="icon">（不指定 sizes）
/favicon.ico（默认路径，即使没有 link 标签）

自动发现

即使不写 <link> 标签，浏览器也会自动请求 /favicon.ico。这是最传统的 favicon 加载方式，但推荐显式声明。

apple-touch-icon 详解

apple-touch-icon 是苹果设备特有的图标配置，用于"添加到主屏幕"功能：

html

<!-- 标准配置 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- 带圆角和光泽效果（已废弃，iOS 7+ 不再需要） -->
<!-- <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png"> -->

apple-touch-icon 的特点：

不需要 type 属性
iOS 会自动为图标添加圆角
图标应该设计为 180x180px，不需要额外添加系统效果

mask-icon（Safari Pinned Tab）

html

<!-- Safari 固定标签页图标 -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0066cc">

图标必须是单色的 SVG
color 属性指定图标的颜色
仅在 Safari 9+ 中有效

实战示例

完整的 favicon 配置模板

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>完整的 Favicon 配置</title>

  <!-- SVG Favicon（现代浏览器首选） -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">

  <!-- PNG Favicon（兼容不支持 SVG 的浏览器） -->
  <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
  <link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">

  <!-- ICO Favicon（兼容旧浏览器） -->
  <link rel="shortcut icon" href="/favicon.ico">

  <!-- Apple Touch Icon（iOS） -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

  <!-- Safari Pinned Tab -->
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0066cc">

  <!-- Web App Manifest（Android/Chrome） -->
  <link rel="manifest" href="/site.webmanifest">

  <!-- 主题色（与品牌色一致） -->
  <meta name="theme-color" content="#0066cc">

  <!-- Windows 磁贴颜色 -->
  <meta name="msapplication-TileColor" content="#0066cc">
  <meta name="msapplication-TileImage" content="/mstile-144x144.png">
</head>
<body>
  <h1>完整的 Favicon 配置</h1>
</body>
</html>

Favicon 文件目录结构

/
├── favicon.svg              # SVG 图标（推荐）
├── favicon.ico              # ICO 图标（兼容旧浏览器）
├── favicon-16x16.png        # 16x16 PNG
├── favicon-32x32.png        # 32x32 PNG
├── favicon-192x192.png      # 192x192 PNG
├── apple-touch-icon.png     # 180x180 PNG
├── apple-touch-icon-152x152.png
├── apple-touch-icon-120x120.png
├── safari-pinned-tab.svg    # Safari 单色 SVG
├── mstile-144x144.png       # Windows 磁贴
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── site.webmanifest         # Web App Manifest
└── browserconfig.xml        # IE/Edge 旧版配置

使用 Favicon 生成工具

推荐使用在线工具来生成全套 favicon：

1. RealFaviconGenerator

网址: https://realfavicongenerator.net
上传一张高分辨率图片，自动生成所有尺寸
生成完整的 HTML 代码

2. Favicon.io

网址: https://favicon.io
支持从文字、图片、Emoji 生成 favicon
生成 SVG、ICO、PNG 等格式

3. Maskable.app

网址: https://maskable.app/editor
专门用于生成 Android 的 maskable 图标
检查图标在不同设备上的显示效果

使用 JavaScript 检测 favicon 加载

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Favicon 加载检测</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <style>
    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
    .favicon-list { display: flex; gap: 20px; align-items: center; margin: 20px 0; }
    .favicon-list img { width: 32px; height: 32px; border: 1px solid #ddd; }
    .status { padding: 10px; border-radius: 4px; margin: 10px 0; }
    .success { background: #d4edda; color: #155724; }
    .error { background: #f8d7da; color: #721c24; }
  </style>
</head>
<body>
  <h1>Favicon 信息</h1>
  <div id="output"></div>

  <script>
    var output = document.getElementById('output');

    // 获取所有 icon link 标签
    var iconLinks = document.querySelectorAll('link[rel="icon"], link[rel="apple-touch-icon"]');

    if (iconLinks.length === 0) {
      output.innerHTML = '<p>未找到 favicon 配置。</p>';
    } else {
      var html = '<p>共找到 ' + iconLinks.length + ' 个图标配置：</p>';
      iconLinks.forEach(function(link, i) {
        var status = '已配置';
        html += '<div class="status success">';
        html += '<b>' + (i + 1) + '.</b> ';
        html += 'rel="' + link.rel + '" ';
        html += 'href="' + link.href + '" ';
        if (link.sizes) html += 'sizes="' + link.sizes + '" ';
        if (link.type) html += 'type="' + link.type + '" ';
        html += '</div>';
      });
      output.innerHTML = html;
    }

    // 测试默认 favicon.ico 是否存在
    var testImg = new Image();
    testImg.onload = function() {
      output.innerHTML += '<div class="status success">/favicon.ico 存在</div>';
    };
    testImg.onerror = function() {
      output.innerHTML += '<div class="status error">/favicon.ico 不存在（建议添加）</div>';
    };
    testImg.src = '/favicon.ico?' + Date.now();
  </script>
</body>
</html>

注意事项

1. 不支持 SVG 的浏览器

虽然大多数现代浏览器支持 SVG favicon，但一些旧版浏览器不支持。需要提供 PNG 备用：

html

<!-- SVG 优先，PNG 备用 -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">

2. Favicon 缓存问题

Favicon 有很强的缓存策略，更新后可能不会立即生效。解决方法：

更改文件名（如 favicon-v2.ico）
在 URL 后添加查询参数（如 href="/favicon.ico?v=2"）
清除浏览器缓存

3. 文件路径

Favicon 文件通常放在网站根目录下。如果放在子目录中，需要使用绝对路径：

html

<!-- 推荐：根目录 -->
<link rel="icon" href="/favicon.svg">

<!-- 也可以：子目录 -->
<link rel="icon" href="/assets/images/favicon.svg">

4. 图标设计建议

简洁：在小尺寸下要清晰可辨
高对比：避免浅色背景上的浅色图标
独特：与品牌形象一致
单色：SVG 图标建议使用单色

最佳实践

1. 使用 SVG + PNG 双格式

html

<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">

2. 提供完整的 Apple Touch Icon

html

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

3. 配置 Web App Manifest

html

<link rel="manifest" href="/site.webmanifest">

4. 使用主题色统一风格

html

<meta name="theme-color" content="#0066cc">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0066cc">

5. 使用自动化工具

在构建流程中集成 favicon 生成工具，确保每次更新时生成所有尺寸。

继续学习：preload / prefetch / preconnect

favicon 图标 ​

基础概念 ​

什么是 Favicon ​

Favicon 的格式演进 ​

语法 ​

基本配置 ​

传统 ICO 方式（兼容旧浏览器） ​

现代多尺寸配置 ​

详细说明 ​

各平台所需的图标尺寸 ​

桌面浏览器 ​

iOS（Safari） ​

Android（Chrome） ​

Windows ​

Web App Manifest 中的图标 ​

浏览器选择 Favicon 的优先级 ​

apple-touch-icon 详解 ​

mask-icon（Safari Pinned Tab） ​

实战示例 ​

完整的 favicon 配置模板 ​

Favicon 文件目录结构 ​

使用 Favicon 生成工具 ​

使用 JavaScript 检测 favicon 加载 ​

注意事项 ​

1. 不支持 SVG 的浏览器 ​

2. Favicon 缓存问题 ​

3. 文件路径 ​

4. 图标设计建议 ​

最佳实践 ​

1. 使用 SVG + PNG 双格式 ​

2. 提供完整的 Apple Touch Icon ​

3. 配置 Web App Manifest ​

4. 使用主题色统一风格 ​

5. 使用自动化工具 ​

参考链接 ​

favicon 图标

基础概念

什么是 Favicon

Favicon 的格式演进

语法

基本配置

传统 ICO 方式（兼容旧浏览器）

现代多尺寸配置

详细说明

各平台所需的图标尺寸

桌面浏览器

iOS（Safari）

Android（Chrome）

Windows

Web App Manifest 中的图标

浏览器选择 Favicon 的优先级

apple-touch-icon 详解

mask-icon（Safari Pinned Tab）

实战示例

完整的 favicon 配置模板

Favicon 文件目录结构

使用 Favicon 生成工具

使用 JavaScript 检测 favicon 加载

注意事项

1. 不支持 SVG 的浏览器

2. Favicon 缓存问题

3. 文件路径

4. 图标设计建议

最佳实践

1. 使用 SVG + PNG 双格式

2. 提供完整的 Apple Touch Icon

3. 配置 Web App Manifest

4. 使用主题色统一风格

5. 使用自动化工具

参考链接