使用 JSX 在 Next.js 项目中集成自定义 Favicon 时遇到的问题

Question

我正在开发一个 Next.js 项目，其中使用 JSX 而不是 TSX。我想为我的网站设置一个自定义图标，并确保它在所有页面上正确显示。但是，我不确定正确的集成过程，特别是考虑到我有单独的布局和页面组件。

具体内容如下： 我在 Next.js 项目中使用 JSX 而不是 TSX。 我有单独的布局（layout.jsx）和页面（page.jsx）组件。 我想为我的网站设置自定义图标。 我已经生成了 ICO、PNG 和 SVG 格式的网站图标文件。

我已经尝试了所有可用的解决方案，但它仍然与往常一样。任何适当的解决方案都是有意义的。谢谢你..

Answer 1

解决方案：

在您的项目中，应用程序下会有默认的

favicon.ico

文件，将其替换为您的自定义 favicon.ico 文件。将您的 favicon.ico 文件名保留为

favicon.ico

。图标图像只能位于

app/

的顶层。

地点：

app/favicon.ico

app
├── favicon.ico

更换后，清除浏览器历史记录并刷新页面。

请阅读：

• 图标：https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

如果您有任何疑问，请发表评论（如果有必要我会更新答案）