最适合 Next.js 的 Favicon 生成器
Next.js 不使用你手写的 link 标签。App Router 从 app 目录读取名为 icon、apple-icon 和 favicon 的文件,并在构建时注入标记。合适的生成器恰好交给你这些文件。
在 Next.js 上真正重要的是什么
App Router 从文件而非标签解析图标。app 目录里名为 icon、apple-icon 或 favicon 的文件会被自动定尺寸并链接。所以对生成器而言,决定性的问题是:它的输出是否按这套约定命名并放置文件,还是丢给你一堆零散的 PNG 和一组框架并不想要的 link 标签。
Pages Router 则不同:在那里你把文件放进 public,并在自定义的 Head 里声明标签。一个知道你处在这两者中哪一个的生成器,能替你避开那个会让 Next.js favicon 悄无声息什么都不输出的错误。
在 Next.js 上重要的评判标准
| 该看什么 | 为什么它在 Next.js 上重要 | 这里的生成器如何做到 |
|---|---|---|
| App Router 文件名 | 图标从 app/icon、app/apple-icon、app/favicon.ico 解析 | 按这套约定命名并放置导出的文件 |
| 无需手写标签 | 框架替你注入 link 标签 | 略过通用工具会加上的那些多余标签 |
| manifest 与 Android | PWA 安装需要完整的尺寸范围 | 导出 manifest.json 以及 192 和 512 的 Android 图标 |
| 感知路由方式 | App 和 Pages 解析图标的方式不同 | 安装指引覆盖两种路由,而不只是其中一种 |
文件放在哪里（App Router）
- app/
- favicon.icoaddServed at /favicon.ico, tag auto-injected
- icon.pngaddSized and linked at build
- apple-icon.pngadd180x180 home screen icon
- public/
- manifest.jsonaddPWA install metadata
- android-icon-192x192.pngadd
- android-icon-512x512.pngadd
标记为 add 的文件,是生成器导出的那些。其余一切都是一个原装的 Next.js 项目。
真正的生成器 vs 仅靠 Next.js 文件约定
一个感知 Next.js 的生成器
Start here推荐
- 导出内容匹配 app 目录约定
- 产出 favicon.ico、每一种 PNG 尺寸和 apple-icon
- 为 PWA 安装包含 manifest.json 和 Android 尺寸
- 一张源图,每种尺寸都渲染正确
自己丢一个文件进去
- 单个 app/favicon.ico 只覆盖标签页,别的都没覆盖
- 没有 apple-touch 图标,所以 iOS 主屏幕只能回退
- 没有 manifest,所以 Android 安装看起来没做完
- 手动缩放一张图,很少能在 16px 下读得清
在 Next.js 里 favicon 需要 link 标签吗？
在 App Router 里不需要。app 目录里名为 favicon.ico、icon 和 apple-icon 的文件会在构建时被自动读取、定尺寸并链接。一个还额外输出手写 link 标签的生成器,是在添加框架已经产出的标记。Pages Router 是例外,你要在自定义 Head 里声明标签。
为 Next.js,生成器应该导出哪些尺寸？
标签页用 favicon.ico、iOS 主屏幕用 180x180 的 apple-icon,以及从 manifest.json 引用、用于 Android 和 PWA 安装的 192 和 512 PNG。先把图形设计成在 16px 下也成立,因为那才是决定它读不读得清的尺寸。
The step-by-step for Next.js
You've picked the tool. Here's the exact install for Next.js.