Next.js 13 Beta：如何用新Metadata API添加多尺寸Favicon及站点清单？

一、多Favicon的正确配置方式 #

你碰到的ts(1117)错误是因为icons对象里重复定义同名属性，Next.js的Metadata API其实支持icons为数组格式，每个元素是包含src、sizes、type的对象；同时苹果触摸图标有专门的appleTouchIcon字段，不需要混在icons里。正确写法如下：

export const metadata = {
  title: 'Welcome',
  icons: [
    { src: "/_next/static/media/metadata/favicon-32x32.png", sizes: "32x32", type: "image/png" },
    { src: "/_next/static/media/metadata/favicon-16x16.png", sizes: "16x16", type: "image/png" }
  ],
  appleTouchIcon: "/_next/static/media/metadata/apple-touch-icon.png"
};

这样既符合TypeScript类型要求，又能同时配置多个不同尺寸的favicon和苹果专属图标。

二、静态自动识别 vs 显式配置 #

直接将规范命名的图标文件（比如favicon.ico、apple-touch-icon.png）放在app根目录或public目录下，Next.js会自动生成对应的meta标签，无需在代码中声明。这种方式适合基础需求，完全够用。

如果需要自定义图标尺寸、类型或针对特定设备的图标，再用上面的显式数组配置即可，不需要用动态Metadata或条件渲染，静态配置就能覆盖绝大多数场景，没必要复杂化。

三、站点清单（Manifest）的配置 #

Next.js Metadata API支持直接添加manifest字段，取消你代码里的注释即可：

export const metadata = {
  title: 'Welcome',
  icons: [/* 图标配置 */],
  appleTouchIcon: "/_next/static/media/metadata/apple-touch-icon.png",
  manifest: "/site.webmanifest"
};

确保site.webmanifest放在静态资源可访问的路径（比如public目录），就能正常加载。这个字段是官方支持的，只是可能你没留意到类型定义中的对应项。

内容的提问来源于stack exchange，提问作者jaay g.