Next.js 13.5如何添加Favicon？元数据配置与图片文件有何区别？

效果是否相同？ #

不完全一致：

• 直接在app根目录放置favicon.ico是传统静态文件方案，浏览器会自动发起该路径的请求，兼容性拉满，所有主流浏览器都支持，但仅能使用ICO格式。
• 通过Metadata API配置则更灵活：支持SVG、PNG等多种格式，还能配置不同尺寸的图标适配不同设备（如苹果触摸图标、Windows磁贴图标），甚至可以通过代码动态生成图标配置，适合需要定制化图标的场景。示例代码如下：

export const metadata = {
  title: "My title",
  description: "My description",
  icons: {
    icon: "/assets/images/site-logo.svg",
  },
};

能否任选其一？ #

完全可以，按需选择即可：

• 若仅需一个基础的ICO格式图标，直接把favicon.ico放到app根目录最省心，无需编写额外代码。
• 若要用非ICO格式（比如SVG），或者需要适配多设备图标，就用Metadata API来配置。

同时配置两种方式会有什么影响？ #

当两种配置同时存在时，Metadata API的配置会优先生效。Next.js会优先根据metadata里定义的icons生成对应的<link>标签注入页面，此时浏览器不会自动请求根目录的favicon.ico；只有当Metadata API配置的图标路径错误、加载失败时，浏览器才会 fallback 去请求根目录的favicon.ico作为备选。

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