如何在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