App Router 可以根据约定文件或 metadata 对象生成图标元素。两种方式都有效，但如果没有明确规则就混用，很容易产生相互冲突的声明。
选择文件约定方式
将 favicon.ico 放在 app 根目录。受支持的 icon 文件可以放在路由段中，而 apple-icon 用于描述 Apple 设备图标。
Next.js 会检测这些文件，确定所需属性，并将相应 link 元素添加到 head 中。放在某个路由段中的图标会应用于该段内的路由。
| 文件 | 位置 | 用途 |
|---|---|---|
| favicon.ico | app/ | 网站后备图标 |
| icon.svg | app 路由段 | 浏览器图标 |
| apple-icon.png | app 路由段 | Apple 图标 |
| manifest.webmanifest | app 路由段 | 可安装应用清单 |
通过 metadata 显式指定路径
如果资源位于 public 或图片托管服务中，请在布局或页面中声明 metadata.icons。使用一致的 URL 设置 icon、apple，以及需要时的 shortcut。
子路由段的元数据可能替换从父级继承的复合字段。请在多个路由中检查最终 head，不要假设所有父级条目都会被合并。
对于按需生成的图标，Next.js 也支持 icon.tsx 或 icon.js。函数返回图片数据，并显式指定尺寸和内容类型。此方式适合真正需要动态组合的场景；静态文件更便于缓存、检查，也更容易在不同部署中稳定提供。
连接清单及其图标
静态清单文件或 manifest.ts 函数可以描述应用名称、颜色和可安装图标。清单图标的 URL 必须公开可访问，并指向与声明尺寸相符的文件。
请区分清单与标签页图标的作用：512×512 安装图标不会自动替代 icon.svg 或 favicon.ico。
在生产环境中测试
执行生产构建，从每个受影响的路由段中打开一个路由，并检查 link 元素。然后直接打开每个资源 URL，确认中间件没有拦截请求。
如果使用 basePath 或 CDN，请在部署环境中测试生成的 URL。本地表现不一定能暴露错误的公共资源基础路径或重写规则。
一手资料
常见问题
需要手动编写 link 元素吗？
不需要。文件约定或 metadata.icons 都能生成它们。请选择一个明确、统一的声明来源。
favicon.ico 应该放在哪里？
使用 App Router 时，favicon.ico 文件约定仅支持放在 app 目录根部。
manifest.ts 会替代 icon.svg 吗？
不会。清单除其他数据外，还描述可安装应用的图标；icon.svg 则直接提供浏览器图标。