如何在Next.js 13 App Router中添加/修改Favicon图标？

Next.js 13的App Router对Favicon的处理非常简洁，无需复杂配置，以下是具体操作步骤：

添加Favicon #

1. 准备图标文件

   • 建议准备多尺寸/格式的图标以适配不同设备：
     • favicon.ico：传统格式，包含16x16、32x32像素尺寸
     • apple-touch-icon.png：适配苹果设备，推荐180x180像素
     • icon.svg：矢量格式，自动适配各种分辨率
   • 确保图标文件符合标准规格，避免显示异常。

2. 放置图标到指定目录

   • 将所有图标文件直接放入项目根目录下的app文件夹中，Next.js会自动检测并引入这些图标：

     your-project/
     ├── app/
     │   ├── favicon.ico
     │   ├── icon.svg
     │   ├── apple-touch-icon.png
     │   └── ...其他图标文件
     └── ...其他项目文件
     

3. 验证效果

   • 启动开发服务器：npm run dev
   • 打开页面后查看浏览器标签栏，或右键页面→查看源代码，确认<link>标签已自动引入图标。

自定义图标配置（可选） #

如果需要更精细的控制（比如指定特定路径、添加额外元数据），可以在app/layout.js（或layout.tsx）中通过metadata对象手动配置：

export const metadata = {
  icons: {
    icon: '/favicon.ico', // 对应app/favicon.ico
    apple: '/apple-touch-icon.png', // 对应app/apple-touch-icon.png
    other: {
      rel: 'icon',
      url: '/icon-32x32.png',
      sizes: '32x32',
      type: 'image/png',
    },
  },
};

修改Favicon #

• 基础修改：直接替换app目录下对应的图标文件，比如用新的favicon.ico覆盖旧文件，开发环境下热更新会自动生效，生产环境需重新构建。
• 自定义配置修改：如果使用了上述metadata配置，确保新图标文件路径与配置一致，同时替换对应文件。

注意事项 #

• 浏览器可能缓存旧图标，修改后可通过Ctrl+Shift+R强制刷新页面，或使用隐私窗口验证新图标。
• 确保图标文件名拼写正确，否则Next.js无法自动识别。

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