如何在 Next.js 14 或 15 中动态更改深色和浅色模式的 Favicon？

Question

我正在使用

Next.js 14

开发

App Router

应用程序，我想根据用户的配色方案偏好（深色或浅色模式）动态更改图标。目前，我有一个黑色的图标和一个白色的图标。如何设置我的 Next.js 14 应用程序，以便在激活深色模式时自动将图标切换到适当的版本，并在浅色或默认模式下恢复为黑色版本？

在以前的版本中，这可以使用

<Head/>

组件来实现。然而，在

Next.js

版本 14 中，引入了新的

Metadata

接口来描述所有元数据字段。但是，现在我不知道如何实现基于颜色模式的图标变化。

我的期望：

• 在我的

  Next.js

  版本 14 应用程序中，我想根据颜色模式动态更改

  favicon

  。

• 我希望我可以根据用户的配色方案偏好（深色或浅色模式）以编程方式/自动在黑白

  favicon

  版本之间切换。

Answer 1

由于我发布问题时没有立即得到答复，所以我在互联网上搜索并没有找到任何解决方案。因此，我阅读了官方有关图标的文档，并且自己找到了解决方案。虽然文档中没有直接的解决方案，但得到了提示，它解决了我的问题。

我分享代码是因为如果将来有人遇到同样的问题，这会对他们有所帮助，

// 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

或默认映射图标的任何文件才能激活

Metadata

界面的

icon

。而且，我的

favicon or icon images

存储在

public/images/icon-light.png

和

public/images/icon-dark.png

中。而且，现在它根据颜色模式动态工作。

快速程序：

• 从

  favicon

  目录中删除任何

  icon

  或

  app/

  图像。
• 将

  favicon or icon images

  存储到

  public/images/

  目录。
• 在

  app/Layout.tsx

  metadata.icons.icon

  中将

  url

  和

  href

  路径添加到存储的

  images

  相对路径中。 ✅
• 如果您觉得难以理解；来自 YouTube 的视频使其变得实用，YouTube 视频链接：https://youtu.be/fcUE498s4x0

Answer 2

我的变体，它帮助我避免了 Next 14 中的一些错误

import iconLignt from "@/public/images/iconLight.svg";
import iconDark from "@/public/images/icon.svg"; 


export const metadata: Metadata = {
    icons: [
        { 
            media: "(prefers-color-scheme: light)", 
            url: iconLignt.src,
            type: "image/svg+xml", 
        },
        { 
            media: "(prefers-color-scheme: dark)", 
            url: iconDark.src, 
            type: "image/svg+xml",
        },
    ],
};