如何使用 Next.js 13 的 favicon

Question

我遵循了文档，但图标没有出现。我该如何解决它？

这是我的来源

//layout.tsx

import './styles'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'profile-card',
  description: '프로필 카드 페이지',
}

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

我尝试了Next.js文档。

Answer 1

在项目根目录中的 app 文件夹旁边创建一个

public

文件夹，并将 favicon.ico 放入其中。

现在 favicon.ico 应该可以通过

http://localhost:3001/public/favicon.ico

访问

然后将以下

rewrite

添加到项目根目录中的 next.config.js 中：

module.exports = {
// ...
  async rewrites() {
    return [
      {
        source: '/:path*/favicon.ico',
        destination: '/favicon.ico',
      },
    ]
  },
// ...
}

这会导致网站图标无论在哪里都可用

http://localhost:3001/favicon.ico

有了这个，您的网站应该能够检测到该图标。

Answer 2

您不需要执行任何操作，只需将 public 文件夹中的 favicon.ico 替换为您原来的 favicon.ico 文件即可。 NextJS 会自动将其渲染到客户端页面上。例如：【可以看下图。】

NextJS 13.0 中无需担心 favicon.ico 文件

Answer 3

您不需要自己添加

head

或

link

。您只需要正确目录中具有正确名称的文件，如doc所示：

如果您仍然看不到它，请尝试刷新浏览器，停止开发服务器，然后重新开始。

如何使用 Next.js 13 的 favicon

问题描述投票：0回答：3

3个回答

最新问题

如何使用 Next.js 13 的 favicon

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3