如何在NextJS的layout.ts元数据中添加Logo图片？

要在Next.js的元数据里添加Logo（站点图标），直接在Metadata对象中新增icons字段即可，具体配置如下：

修改后的完整代码示例 #

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'UpWhere Global Tapestry',
  description: 'Crafting tales from each nook and cranny.',
  icons: {
    // 主站点图标，对应public目录下的favicon.ico文件
    icon: '/favicon.ico',
    // 浏览器快捷方式图标
    shortcut: '/shortcut-icon.png',
    // Apple设备专用触摸图标
    apple: '/apple-touch-icon.png',
    // 自定义多尺寸图标（可选）
    other: [
      {
        rel: 'icon',
        url: '/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        rel: 'icon',
        url: '/icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
  },
}

关键注意事项 #

• 所有图标文件必须放在项目的public目录下，这样才能通过根路径（比如/favicon.ico）直接访问。
• 按需配置即可：如果只需要基础图标，只保留icon字段就行；如果要适配多平台或多尺寸，再补充其他配置项。
• 图标格式推荐使用ico、png，不同尺寸可以覆盖更多设备场景。

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