Favicon 完全指南 2026：所有尺寸、格式和生成方法

Q: 我至少需要多少个 favicon 文件？

你至少需要三个文件：favicon.ico（32x32）用于浏览器标签页和旧版支持，apple-touch-icon.png（180x180）用于 iOS 主屏幕书签，以及在 manifest.webmanifest 中引用的 512x512 PNG 用于 Android 和 PWA 平台。这三个文件在 2026 年覆盖了超过 99% 的设备和浏览器。

Q: 如何让 favicon 在暗色模式下改变？

使用嵌入了包含 @media (prefers-color-scheme: dark) 查询的 <style> 块的 SVG favicon。在查询内部更改 SVG 路径的填充颜色。然后在 HTML 中使用 <link rel="icon" href="/icon.svg" type="image/svg+xml"> 引用 SVG。这在 Chrome、Firefox 和 Edge 中有效。

Q: 2026 年还需要 favicon.ico 文件吗？

需要。虽然现代浏览器支持 PNG 和 SVG favicon，但许多工具和服务仍会自动从根目录请求 /favicon.ico。RSS 阅读器、爬虫、企业浏览器和一些旧版邮件客户端会专门查找此文件。包含它几乎没有成本，还能防止服务器日志中的 404 错误。

Favicon 是出现在浏览器标签页、书签、主屏幕和应用切换器中的小图标。尽管体积很小，但它们对品牌识别和用户体验有着重大影响。然而 2026 年的 favicon 生态系统依然令人困惑——数十种尺寸、多种格式和相互矛盾的建议。本完整 favicon 指南将为你理清头绪，告诉你确切需要什么、为什么需要，以及如何通过编程或 Figma 等设计工具生成 favicon。

最简 Favicon 配置：你实际只需要 3 个文件

网上充斥着让你创建 20 多个 favicon 文件的文章。事实是在 2026 年，你只需要三个文件就能覆盖所有现代浏览器、设备和平台：

favicon.ico — 32x32 ICO 文件，用于旧版浏览器和浏览器标签页
apple-touch-icon.png — 180x180 PNG，用于 iOS 主屏幕书签
icon-512.png — 512x512 PNG，在 Web 应用清单中引用，适用于 Android、PWA 和其他现代平台

你还可以选择添加 SVG favicon 以获得无限缩放能力和暗色模式支持。但仅这三个文件就能让你完全覆盖 Chrome、Firefox、Safari、Edge、iOS 和 Android。

<!-- The minimal favicon setup for 2026 -->
<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 尺寸参考

以下是每种 favicon 尺寸、用途和使用场景的权威参考表：

Size	Format	Purpose	Required
16x16	ICO / PNG	Browser tab (classic), bookmarks bar	Optional (embedded in 32x32 ICO)
32x32	ICO / PNG	Browser tab (standard), Windows taskbar shortcut	Yes
48x48	ICO / PNG	Windows desktop shortcut, Google search results	Optional (recommended for Google)
180x180	PNG	Apple Touch Icon (iOS/iPadOS home screen)	Yes
192x192	PNG	Android home screen icon (via manifest)	Recommended
512x512	PNG	PWA splash screen, Android adaptive icon, Chrome install	Yes (for PWA)
Any	SVG	Modern browsers (scalable, dark mode support)	Optional (highly recommended)

最常请求的尺寸是 32x32（浏览器标签页）、180x180（Apple 设备）和 512x512（PWA 启动画面）。如果你只提供这三种，就能覆盖超过 99% 的使用场景。

格式对比：ICO vs PNG vs SVG

选择正确的 favicon 格式很重要。每种格式都有不同的优势和权衡：

Feature	ICO	PNG	SVG
Multiple sizes in one file	Yes	No	N/A (scalable)
Transparency	Yes	Yes	Yes
Scalability	Fixed (pixelated)	Fixed (pixelated)	Infinite (vector)
Dark mode support	No	No	Yes (CSS media query)
File size	Small-Medium (1-15 KB)	Small (1-10 KB per size)	Very small (0.5-3 KB)
Browser support	All browsers	All modern browsers	Chrome, Firefox, Edge (no Safari tab)
Apple Touch Icon	Not supported	Required format	Not supported
Web manifest	Not recommended	Required format	Not supported
Animation	No	No (APNG limited)	Yes (CSS/SMIL)

建议：使用 ICO 作为 /favicon.ico 回退，PNG 用于 Apple Touch Icon 和 Web 清单图标，可选 SVG 用于支持它的现代浏览器。这种三格式策略覆盖了所有场景。

分步指南：创建 Favicon

从 Figma 导出

在一个专用画框中以 512x512 像素设计你的图标。使用简单、易识别的形状——它必须在 16x16 时仍清晰可辨。
将画框导出为 PNG 1x 比例（512x512）。
复制画框并调整为 180x180。导出为 PNG 用作 Apple Touch Icon。
对于 ICO 文件，导出 32x32 PNG 并使用下面的编程方法转换为 ICO。
提示：如果需要透明 favicon，请关闭背景图层。ICO 和 PNG 支持透明度；Apple Touch Icon 在 iOS 上会自动添加白色或彩色背景。

使用 Sharp (Node.js) 编程生成

你可以使用 sharp 库从单个高分辨率源图像自动生成 favicon：

import sharp from 'sharp';

// Generate multiple sizes from a single source
const sizes = [16, 32, 48, 180, 192, 512];

async function generateFavicons(sourceFile: string) {
  for (const size of sizes) {
    await sharp(sourceFile)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ quality: 90, compressionLevel: 9 })
      .toFile(`favicon-${size}x${size}.png`);

    console.log(`Generated favicon-${size}x${size}.png`);
  }
}

generateFavicons('icon-source.png');

要生成 ICO 文件，使用 png-to-ico 包：

import pngToIco from 'png-to-ico';
import { writeFileSync } from 'fs';

async function generateIco() {
  // Include 16x16, 32x32, and 48x48 in a single ICO file
  const icoBuffer = await pngToIco([
    'favicon-16x16.png',
    'favicon-32x32.png',
    'favicon-48x48.png',
  ]);
  writeFileSync('favicon.ico', icoBuffer);
  console.log('Generated favicon.ico');
}

generateIco();

完整构建脚本

以下是一个完整的 Node.js 脚本，可从单个源 PNG 生成所有必需的 favicon 文件：

#!/usr/bin/env node
// generate-favicons.mjs
// Usage: node generate-favicons.mjs icon-source.png

import sharp from 'sharp';
import pngToIco from 'png-to-ico';
import { writeFileSync, mkdirSync } from 'fs';

const SOURCE = process.argv[2] || 'icon-source.png';
const OUT_DIR = './public';

mkdirSync(OUT_DIR, { recursive: true });

async function main() {
  // 1. Generate PNG sizes
  const pngSizes = [
    { size: 16, name: 'favicon-16x16.png' },
    { size: 32, name: 'favicon-32x32.png' },
    { size: 48, name: 'favicon-48x48.png' },
    { size: 180, name: 'apple-touch-icon.png' },
    { size: 192, name: 'icon-192x192.png' },
    { size: 512, name: 'icon-512x512.png' },
  ];

  for (const { size, name } of pngSizes) {
    await sharp(SOURCE)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ compressionLevel: 9 })
      .toFile(`${OUT_DIR}/${name}`);
    console.log(`  Created ${name}`);
  }

  // 2. Generate ICO (combines 16, 32, 48)
  const icoBuffer = await pngToIco([
    `${OUT_DIR}/favicon-16x16.png`,
    `${OUT_DIR}/favicon-32x32.png`,
    `${OUT_DIR}/favicon-48x48.png`,
  ]);
  writeFileSync(`${OUT_DIR}/favicon.ico`, icoBuffer);
  console.log('  Created favicon.ico');

  // 3. Generate manifest.webmanifest
  const manifest = {
    name: 'Your App Name',
    short_name: 'App',
    icons: [
      { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
    ],
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
  };
  writeFileSync(
    `${OUT_DIR}/manifest.webmanifest`,
    JSON.stringify(manifest, null, 2)
  );
  console.log('  Created manifest.webmanifest');

  console.log('\nDone! All favicon files generated.');
}

main().catch(console.error);

HTML 标记：精确的 Link 标签和 Manifest

将这些标签添加到你网站每个页面的 <head> 中：

<head>
  <!-- Favicon: ICO fallback for legacy browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- Favicon: SVG for modern browsers (scalable + dark mode) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

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

  <!-- Web App Manifest: Android + PWA -->
  <link rel="manifest" href="/manifest.webmanifest">

  <!-- Optional: theme color for browser chrome -->
  <meta name="theme-color" content="#ffffff"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1a1a2e"
        media="(prefers-color-scheme: dark)">
</head>

在根目录中创建 manifest.webmanifest（或 site.webmanifest）：

{
  "name": "Your Application Name",
  "short_name": "AppName",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

清单文件告诉 Android 和 PWA 环境使用哪些图标。"purpose": "any maskable" 值确保图标既可作为常规图标使用，也可在 Android 的自适应图标蒙版（因设备制造商而异的圆角形状）中使用。

使用 SVG 实现暗色模式 Favicon

SVG favicon 最强大的功能之一是能够使用 SVG 内部的 CSS prefers-color-scheme 来适应用户的颜色方案：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    /* Light mode (default) */
    .icon-bg { fill: #1a1a2e; }
    .icon-fg { fill: #ffffff; }

    /* Dark mode override */
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #e0e0e0; }
      .icon-fg { fill: #1a1a2e; }
    }
  </style>

  <!-- Background circle -->
  <circle class="icon-bg" cx="64" cy="64" r="60" />

  <!-- Foreground shape (your logo/icon) -->
  <path class="icon-fg"
        d="M44 40 h40 v12 H56 v8 h24 v12 H56 v16 H44 V40z" />
</svg>

这个 SVG favicon 会根据用户的操作系统或浏览器主题偏好自动在暗色和亮色版本之间切换。无需 JavaScript——完全是声明式的。这在 Chrome、Firefox 和 Edge 中有效。Safari 支持 SVG favicon，但截至 2026 年初暗色模式行为不一致。

Reference this SVG in your HTML:

<!-- SVG favicon with automatic dark mode -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- ICO fallback for browsers that don't support SVG favicons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

在所有平台上测试你的 Favicon

生成 favicon 后，在所有平台上测试以确保它们正确渲染：

桌面浏览器：在 Chrome、Firefox、Safari 和 Edge 中打开你的网站。检查不同缩放级别下的标签页图标。验证 favicon 出现在书签列表中。
移动 iOS：在 iPhone 的 Safari 中打开你的网站。点击分享然后"添加到主屏幕"。验证 180x180 Apple Touch Icon 正确显示在主屏幕上。
移动 Android：在 Chrome 中打开并点击"添加到主屏幕"或"安装应用"。验证清单中的 192x192 和 512x512 图标被使用。
PWA：如果你的网站是 PWA，通过 Chrome 安装并验证启动画面使用 512x512 图标。
Realfavicongenerator.net：使用 realfavicongenerator.net/favicon_checker 的 favicon 检查工具进行跨平台自动测试。
暗色模式：将系统切换到暗色模式并验证 SVG favicon 自适应（Chrome 和 Firefox）。

Quick checklist for verifying your favicon setup:

# Verify all favicon files exist and are accessible
curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/favicon.ico
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/icon.svg
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/apple-touch-icon.png
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/manifest.webmanifest
# Expected: 200

# Validate manifest JSON
curl -s https://yoursite.com/manifest.webmanifest | python3 -m json.tool
# Should output formatted JSON without errors

常见问题

我至少需要多少个 favicon 文件？

你至少需要三个文件：favicon.ico（32x32）用于浏览器标签页和旧版支持，apple-touch-icon.png（180x180）用于 iOS 主屏幕书签，以及在 manifest.webmanifest 中引用的 512x512 PNG 用于 Android 和 PWA 平台。这三个文件在 2026 年覆盖了超过 99% 的设备和浏览器。

我应该使用 SVG 还是 PNG 作为 favicon？

两者都用。PNG 是 Apple Touch Icon 和 Web 清单图标所必需的，因为 iOS 和 Android 在这些上下文中不支持 SVG。SVG 作为主要浏览器标签页 favicon 很出色，因为它可以完美缩放到任何分辨率，并通过 CSS prefers-color-scheme 支持暗色模式。

favicon 大小会影响页面加载速度吗？

Favicon 文件通常非常小（低于 15 KB），且浏览器会积极缓存，因此对页面加载速度的影响可以忽略不计。但避免不必要的大文件——优化后的 512x512 PNG 应远低于 50 KB。

如何让 favicon 在暗色模式下改变？

使用嵌入了包含 @media (prefers-color-scheme: dark) 查询的 <style> 块的 SVG favicon。在查询内部更改 SVG 路径的填充颜色。然后在 HTML 中使用 <link rel="icon" href="/icon.svg" type="image/svg+xml"> 引用 SVG。这在 Chrome、Firefox 和 Edge 中有效。

Web 清单中 maskable 图标的用途是什么？

Maskable 图标专为 Android 的自适应图标系统设计，操作系统会将图标裁剪成各种形状（圆形、圆角方形等）。maskable 图标包含额外的内边距——"安全区域"——这样图标的重要部分在被裁剪时不会被切掉。

2026 年还需要 favicon.ico 文件吗？

需要。虽然现代浏览器支持 PNG 和 SVG favicon，但许多工具和服务仍会自动从根目录请求 /favicon.ico。RSS 阅读器、爬虫、企业浏览器和一些旧版邮件客户端会专门查找此文件。包含它几乎没有成本，还能防止服务器日志中的 404 错误。