Next.js 13项目中apple-touch-icon已在<head>仍报警告的原因？

你遇到的这个问题，主要和Next.js 13 App Router的head内容渲染逻辑、Edge工具的检测时机有关，下面是具体原因和解决思路：

可能的原因 #

• 手动标签与Next.js自动注入冲突：Next.js会根据配置自动生成apple-touch-icon相关标签，你手动添加的标签可能被Next.js的渲染逻辑后置，导致Edge工具扫描时，初始DOM里没找到对应标签，触发警告。
• Edge工具检测时机过早：Edge的开发者工具或Lighthouse可能在Next.js完成客户端 hydration 前就扫描DOM，此时手动添加的标签还没被正确注入到head，导致误报。
• head写法不符合App Router规范：App Router推荐用Metadata API或generateMetadata函数管理head内容，直接写原生<head>标签可能存在渲染优先级问题，导致标签未被正确识别。

解决办法 #

改用Next.js官方Metadata API #

这是最稳妥的方式，让Next.js统一管理head内容，避免冲突。在app/layout.tsx里这样写：

import { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    apple: [{ url: '/icon.png' }],
  },
  // 如果需要PWA相关配置，也可以在这里添加
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

写完后移除之前手动添加的<link>标签，让Next.js自动生成符合规范的标签。

验证最终DOM渲染结果 #

打开Edge开发者工具的Elements面板，查看最终渲染后的<head>标签里是否存在apple-touch-icon标签。如果存在，那大概率是工具的误报，可以忽略；如果不存在，说明之前的手动写法有问题，改用Metadata API即可解决。

检查next.config.js配置 #

确保没有重复的图标配置项，避免Next.js生成多个冲突的标签，影响工具检测。

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