网站 Favicon 接入与旧图标缓存排查

先设计适合小标签页的图标

同一图标从 256 到 16 像素的尺寸对比 — 检查小尺寸轮廓。标注表示原始图像尺寸，整张配图会随页面缩放。

从具有清晰主体的方形原图开始。细线和小字在 16 像素时容易消失。打开 favicon 生成器，进入编辑器导入图片，选择 Web，调整缩放和留白，导出前检查 16 与 32 像素预览。分辨率再高也无法弥补过于复杂的构图。

导出并放置文件

浏览器标签页、favicon 链接与公开图标文件的对应关系 — 网站接入示意。请使用实际部署的文件路径；图中的浏览器不是产品截图。

下载并解压 ZIP。Web 预设包含 favicon.ico、favicon-32x32.png、favicon-180x180.png 等文件。将需要的文件复制到网站公开静态资源目录。如果压缩包包含平台子目录，应提取实际要提供访问的文件，而不是直接上传 ZIP。

普通 HTML 页面可以在 head 内配置：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

链接必须与文件部署位置一致。如果网站部署在子路径，根路径链接可能需要添加对应前缀。

在 Next.js 中避免多套配置互相干扰

App Router 项目可在 public 放置文件，通过 metadata 配置；也可以采用 Next.js 的图标文件约定。选择与现有项目一致的方法，并检查 app/favicon.ico 是否还提供另一份旧图标。

export const metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    ],
    apple: [{ url: '/favicon-180x180.png', sizes: '180x180' }],
  },
};

可参阅 Next.js 图标文件约定和 HTML link 参考。

排查旧图标或缺失图标

直接打开每个图标 URL，检查状态码、MIME 类型和图片内容。返回 200 的 HTML 回退页面仍不是图标。
检查页面 head 中是否有重复或过期的链接。
使用全新浏览器资料测试。标签页和书签图标缓存可能不会随普通刷新清除。
检查部署后的静态资源缓存。必要时使用新的版本化文件名并更新引用，避免反复修改无关设置。

搜索结果图标可能比浏览器标签页更新更慢。确认爬虫可访问资源，并参考 Google favicon 指南，不要将未立即更新视为导出失败。

后续步骤

安装型 PWA 的图标使用 Web App Manifest 配置，可使用 PWA 图标生成器，并参考 PWA manifest 教程。