如何在next14项目中加入favicon

如何在next14项目中加入favicon

第一次碰见这个问题的时候很头疼，直接搜官方文档也没有详细介绍这个，但其实next14提供了很简单的方法：

1. Convention
   将 favicon.ico 放置在 app/ 或 public/ 文件夹中，Next.js 将自动生成必要的元数据。

.
├── app/
│   └── favicon.ico <-- here OR
└── public/└── favicon.ico <-- here

2. Metadata
   将 favicon 文件放置在 public 文件夹中，然后使用 Metadata 或 generateMetadata。

在layout.tsx文件中

export const metadata = {icons: {icon: '/icon.png', // /public path},
}

或者

icons: {icon: [{url: '/light-icon.png',media: '(prefers-color-scheme: light)',},{url: '/dark-icon.png',media: '(prefers-color-scheme: dark)',},],
},

参考：https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons