如何在Next.js 13的app目录中通过generateMetaData()添加多图标？

在Next.js 13+的App Router中，generateMetaData的icons字段支持灵活配置多格式、多尺寸的图标，只需调整返回的metadata对象即可完成所有图标的添加，具体修改如下：

export async function generateMetaData() {
  const translate = await getTranslations("home")

  return {
    title: translate("title"),
    description: translate("description"),
    icons: {
      // 主 fallback 图标
      icon: "/favicon.ico",
      // Apple 设备触摸图标（对应180x180尺寸）
      apple: "/favicon-180x180.png",
      // SVG 格式图标
      svg: "/favicon.svg",
      // 多尺寸PNG图标集合
      icons: [
        { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
        { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
        { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
        { url: "/favicon-512x512.png", sizes: "512x512", type: "image/png" },
      ],
    },
  }
}

关键说明： #

• 文件存放位置：确保所有图标文件都放在项目根目录的public文件夹下，这样才能通过/文件名的路径直接访问。
• 字段作用：
  • apple：专门为苹果设备配置触摸图标，对应你现有的180x180尺寸图标。
  • svg：指定SVG格式的图标，现代浏览器会优先加载SVG以获得更好的缩放效果。
  • icons数组：可添加任意多尺寸的PNG图标，每个条目需明确url、sizes和type，浏览器会根据设备分辨率自动选择最优图标加载。

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