由于没有直接的答案，当我发布的问题，我在互联网上搜索，并没有找到任何解决方案。所以，我已经阅读了官方文档的图标，我找到了解决方案自己。虽然没有直接的解决方案，在文档中，但得到了提示，它解决了我的问题。
我分享代码，因为如果有人遇到同样的问题，在未来它会帮助他们，

// app/layout.tsx
export const metadata: Metadata = {
  title: 'Website Title',
  description: 'Website description',
  icons: {
    icon: [
      {
        media: '(prefers-color-scheme: light)',
        url: '/images/icon-light.png',
        href: '/images/icon-light.png',
      },
      {
        media: '(prefers-color-scheme: dark)',
        url: '/images/icon.png',
        href: '/images/icon-dark.png',
      },
    ],
  },
};

字符串
我必须删除app/icon.png或任何默认Mapfavicon的文件，以便激活Metadata界面的icon。而且，我的favicon or icon images存储在public/images/icon-light.png和public/images/icon-dark.png中。而且，现在它基于颜色模式动态工作。

快速流程：

• 从app/目录中删除任何favicon或icon图像。
• 将favicon or icon images存储到public/images/目录。
• 在app/Layout.tsxmetadata.icons.icon中，将url和href路径添加到存储的images相对路径。