将 Favicon 添加到 NextJs App 路由器应用程序

Question

我对新的 Next.js App Router有疑问。他们删除了 head.js 文件，现在（正如文档中所写）我必须在 layout.ts 中使用元数据。我的图标名称是favicon.png。

我如何在这里指定它：

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

Answer 1

这是在 Next.js 13.4 稳定版本中使用 Favicon 的最简单方法。

1. 您需要将 jpg、png 或 SVG 转换为 .ico。只需几秒钟。

2. 将您的 .ico 文件重命名为 icon.ico 并将其粘贴到应用程序文件夹中，然后从应用程序文件夹中删除 favicon.ico

完毕

Answer 2

您可以按如下方式进行：

export const metadata = {
  icons: {
    icon: '/icon.png',
  },
};

输出将是

<link rel="icon" href="/icon.png" />

查看有关图标元数据的所有文档：

https://beta.nextjs.org/docs/api-reference/metadata#icons

Answer 3

要添加多个图标并添加其他属性，例如type和sizes：

// layout.tsx
    
export const metadata: Metadata = {
  ...,
  icons: [
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '32x32',
      url: '/favicon/favicon-32x32.png',
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '16x16',
      url: '/favicon/favicon-16x16.png',
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      url: '/favicon/apple-touch-icon.png',
    },
  ],
}

Answer 4

根据此处的文档，添加link也RootLayout可以工作

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        {children}
      </body>
    </html>
  );
}

Answer 5

// app/layout.tsx

import { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    icon: ['/favicon.ico?v=4'],
    apple: ['/apple-touch-icon.png?v=4'],
    shortcut: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
};

// public/
//    |- ...
//    |- android-chrome-192x192.png
//    |- android-chrome-512x512.png
//    |- apple-touch-icon.png
//    |- favicon-16x16.png
//    |- favicon-32x32.png
//    |- favicon.ico
//    |- site.webmanifest
//    |- ...

图标转换器： https: //favicon.io/favicon-converter/