网站图标应该是多大尺寸?

浏览器标签页所需的最小网站图标尺寸是 16×16 像素。不过,现代网站图标方案通常包含多种尺寸:浏览器用 16×16、32×32、48×48;Apple touch icon 用 180×180;Android/PWA manifest 用 192×192 和 512×512。建议先准备一张 512×512 的原图,再从中生成所有尺寸。

网站图标应该用什么格式?

现代浏览器支持 ICO、PNG 和 SVG 格式的网站图标。推荐做法是:为现代浏览器提供 SVG 格式图标(可无限缩放,文件体积小)、提供一张 32×32 的 PNG 作为备用,再加一张 180×180 的 PNG 作为 apple-touch-icon。一个包含 16×16 和 32×32 的 ICO 文件则用于兼容旧版浏览器。

为什么我的网站图标没有在浏览器中显示?

常见原因包括:网站图标文件路径不正确、HTML 中的 link 标签缺失或 type 属性有误,或者浏览器缓存了旧的图标。可以尝试强制刷新(Windows 上按 Ctrl+Shift+R,Mac 上按 Cmd+Shift+R)让浏览器重新加载图标。

需要 ICO 文件,还是可以用 PNG?

现代浏览器(Chrome、Firefox、Safari、Edge)都支持 PNG 格式的网站图标。只有需要兼容旧版 IE 时才必须使用 ICO 文件。如果不需要兼容 IE,一张 32×32 的 PNG 就完全可以满足浏览器标签页的需求,完全可以跳过 ICO 文件。

好的网站图标应该是什么样子?

好的网站图标是品牌标志或 Logo 的简化版本,在 16×16 和 32×32 像素下依然清晰可辨。要避免使用小号文字、复杂渐变和精细细节——这些在小尺寸下都会看不清楚。使用单个首字母、简单图形或醒目的形状效果最好。

如何制作网站图标:适用于所有浏览器和设备的完整指南

Favicon 是"favorites icon"（收藏图标）的缩写，会出现在浏览器标签页、书签和移动设备主屏幕上。它虽然是个很小的元素，却是重要的品牌接触点——而且要在所有浏览器和设备上正确实现，比想象中要复杂得多。下面是具体做法。

什么是 Favicon？

Favicon 是与网站相关联的小图标。它会出现在：

浏览器标签页中，页面标题旁边
浏览器的书签和历史记录中
iOS/Android 主屏幕上，当用户保存你的网站时（Apple touch icon）
PWA 安装程序中，作为应用图标
搜索引擎结果中（有时会显示）

一套完整的 favicon 方案需要多种尺寸和格式，才能覆盖以上所有场景。

必需的 Favicon 尺寸

尺寸	用途
16×16 px	浏览器标签页（标准）
32×32 px	浏览器标签页（高 DPI）、任务栏
48×48 px	Windows 网站图标
180×180 px	Apple touch icon（iOS 主屏幕）
192×192 px	Android Chrome 主屏幕
512×512 px	PWA 启动画面、高分辨率场景
SVG	现代浏览器（可无限缩放）

第一步：准备一张高分辨率的原始图片

创建或导出一张至少 512×512 像素的正方形 PNG 图片作为你的 Logo/图标，背景要透明。这将作为生成所有其他尺寸的原始素材。

favicon 友好设计的技巧：

保持简洁 —— 复杂的设计在 16×16 尺寸下无法辨认
使用高对比度 —— 浅色背景配深色图标，或反之
避免细线条 —— 在小尺寸下会消失
在 16×16 下测试 —— 在设计工具中缩小查看，确认可辨识度

第二步：生成所有 Favicon 尺寸

与其手动调整到每个所需尺寸，不如使用 favicon 生成工具。PicsSizer 的 Favicon 生成器会读取你的原始图片，生成一整套完整的图标包：

上传你的 512×512（或更大）的原始 PNG 图片
预览它在每个尺寸下的效果
下载包含所有必需尺寸的完整 favicon 图标包

第三步：添加 HTML 代码

将以下标签放入 HTML 的 <head> 中：

<!-- Standard 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" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />

第四步：创建 Web App Manifest

为了支持 Android 主屏幕图标和 PWA 功能，需要创建一个 site.webmanifest 文件：

{
  "name": "Your Site Name",
  "short_name": "SiteName",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

SVG Favicon 方案

对于现代浏览器，SVG favicon 是理想选择：

可无限缩放 —— 在任何分辨率下都清晰锐利
文件体积极小 —— 通常不到 2 KB
支持深色模式 —— 可以在 SVG 内部使用 CSS 媒体查询

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

在 SVG 内部使用媒体查询实现深色模式：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: black; }
  </style>
  <rect class="icon" width="32" height="32" rx="4" />
</svg>

所有现代浏览器（Chrome、Firefox、Safari 14+、Edge）都支持 SVG favicon。

Favicon 常见问题排查

Favicon 不显示：

检查文件是否存在于 href 指定的路径上
强制刷新浏览器（Ctrl+Shift+R / Cmd+Shift+R）
在浏览器 DevTools 的 Network 标签页中检查 favicon 请求是否出现 404 错误

桌面端显示 favicon，移动端不显示：

确保为 iOS 设置了 apple-touch-icon
确保 web manifest 存在并已链接，供 Android 使用

更新后仍显示旧的 favicon：

浏览器会大量缓存 favicon。添加一个用于清除缓存的查询字符串：href="/favicon.png?v=2"

Favicon 模糊或有锯齿：

使用更高分辨率的原始图片重新生成（至少 512×512）
检查每个场景是否使用了正确的尺寸

完整的 Favicon 检查清单

使用 PicsSizer 的 Favicon 生成器，从一张图片生成整套图标包，或者查看 Favicon 尺寸指南获取完整参考。