如何在Next.js App Router项目中配置favicon？

在App Router模式下，只需在metadata对象中添加icons字段，就能完成网站图标的配置。假设你的favicon.png文件放在项目根目录的public文件夹中，修改后的代码如下：

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  icons: {
    icon: '/favicon.png',
  },
}

如果需要适配多尺寸或特殊类型的图标（比如苹果触摸图标），可以扩展icons对象的配置，示例如下：

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
  icons: {
    icon: '/favicon.png',
    apple: '/apple-touch-icon.png',
    shortcut: '/shortcut-icon.png',
  },
}

注意：所有图标文件都需要放在public目录下，Next.js会自动解析根路径（/）指向该目录。

内容的提问来源于stack exchange，提问作者Nazar Duma