Next.js 的网站图标
Next.js 14+ App Router 将 /app/icon.png 和 /app/favicon.ico 视为约定 - 将它们放入，Next 会自动发出正确的标签。
将 favicon.ico 放入 /app 中，Next 将在 /favicon.ico 处提供它并注入链接标记。
对于多尺寸或主题图标，请使用文件约定：/app 内的 icon.png、icon.svg、apple-icon.png。接下来从文件元数据生成 <link> 标记。
工作原理
- 1
生成favicon.ico
来自 512×512 源的多尺寸 16/32/48/64。
- 2
放置在/应用程序中
/app/favicon.ico 是自动提供的。添加高清 icon.png。
- 3
核实
在浏览器中打开 /favicon.ico — 接下来无需任何配置即可提供服务。
立即尝试
生成 Next.js 就绪的图标
Favicon 生成器常见问题
Next.js 应用程序路由器中的图标位于何处？+
/app 目录内。文件名（icon、apple-icon、favicon）决定角色。
页面路由器怎么样？+
将 favicon.ico 放入 /public 并从 _document.tsx 链接它。
我还需要多尺寸 .ico 吗？+
推荐用于旧版浏览器支持，尤其是 Edge 和 IE 模式快捷方式。