next14：我看不到我的favicon.ico，尽管我设置了public和metaData

Question

export const metadata: Metadata = {
  title: "title",
  description: "description",
  icons: {
    icon: "/favicon.ico",
  },
};

这是/app/layout.tsx。这是全局布局文件。

我使用应用程序路由器。公共有 favicon.ico。

<link rel="icon" href="/favicon.ico">

我可以在我的下一个项目中找到这个标签。 如果我打开此链接（href），我可以看到我的 favicon.ico。

但这不起作用。我在浏览器中看到默认图标。 为什么会出现这种情况？

我的 favicon.ico 是 32x32。这也太小了吧？

Answer 1

问题：

我看不到我的favicon.ico，虽然我设置了public和metaData

可能的原因：

• favicon.ico

  位置，favicon图像只能位于

  app/

  的顶层，意味着直接位于应用程序文件夹内，而不是应用程序中的任何文件夹下。

可能的解决方案：

更改

favicon

位置，然后清除浏览器历史记录（所有缓存、网站设置等）并重新打开您的页面。

app
├── favicon.ico

（为了安全起见，请在删除

.next

文件夹之前先进行完整的项目备份）如果仍然不可见，请停止服务器并删除

.next

文件夹。

请阅读：

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

• 图像文件（.ico、.jpg、.png）位置： https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico -jpg-png

• 元数据文件约定：https://nextjs.org/docs/getting-started/project-struct#metadata-file-conventions

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