Next.js Favicon 设置指南：用 SVG 一键生成 favicon.ico

你的网站只放一个 favicon.ico，通常也能跑。但要在浏览器标签页、iOS 主屏、PWA 安装图标和 Google 搜索结果里都稳定显示，建议一次性把整套图标配置完整。

这篇文章按“可直接复用”的方式写：先列出需要的图标，再给出从 SVG 到 Next.js 的完整落地流程。

网站到底需要哪些图标

最小可用建议是以下图标资产：

favicon.ico（兼容性兜底）
icon.svg 或 icon.png（现代浏览器）
apple-icon.png（iOS 主屏图标）
manifest（PWA 元信息）
icon-192.png（manifest 常用尺寸）
icon-512.png（manifest 常用尺寸）

实战流程：从 SVG 一次生成整套 favicon 资产

1. 准备一个小尺寸可读的 SVG 源图

favicon 的真实展示尺寸经常只有 16x16 或 32x32，设计时建议：

保留主形状，减少细节
保持高对比度
避免过细描边

可以先在 SVG Viewer 里预览不同缩放下的可读性。

2. 生成 `favicon.ico`

直接使用 SVG to ICO：

上传 SVG
勾选常见尺寸（16/32/48/64）
导出单个 .ico 文件

这一步就是你站点的核心能力：从 SVG 快速得到可部署的 favicon.ico。

3. 生成 `icon-192.png` 与 `icon-512.png`

使用 SVG to PNG 各导出一份：

icon-192.png
icon-512.png

如果你希望 iOS 图标风格独立，也可以再导出一个 apple-icon.png（常见用 180x180）。

4. 可选：上线前优化体积

导出后可用 SVG Optimizer 或 SVG Minify 进一步减小源文件体积，便于后续维护与分发。

Next.js App Router 接入示例

推荐目录：

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

app/manifest.ts 示例：

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

Google 搜索展示的关键检查（上线前必做）

这部分不是“写 SEO 文案”，而是图标准入检查：

https://your-domain.com/favicon.ico 必须可访问（200）
不要在 robots.txt 屏蔽图标路径
favicon 必须是正方形，且至少 8x8
建议提供 48 的倍数尺寸（如 48x48、96x96）
首页最终 HTML 要有图标声明（rel="icon"）

满足这些条件后，Google 搜索中的站点图标通常会在抓取更新后生效。

如果你不是 Next.js，而是 TanStack Start（本项目）

同一套图标文件也能直接用。核心是把链接写进根文档 <head>：

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

常见问题

只有 `favicon.ico` 可以上线吗？

可以，但会缺失 iOS 和 PWA 的最佳显示效果。

为什么本地看到了新图标，Google 结果还是旧图标？

通常是抓取和缓存周期问题。先确认资源可访问，再等待下一轮抓取。

`icon.svg` 和 `favicon.ico` 要二选一吗？

不需要。常见做法是 .ico 兜底，svg/png 提供现代显示质量。

Next.js Favicon 设置指南：用 SVG 一键生成 favicon.ico