Search code examples
next.jsfavicon

How to use favicon by Next.js 13

I followed the documentation but the favicon did not appear. How can I fix it?

enter image description here enter image description here enter image description here

and here is my source

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

I tried the Next.js document.

Solution

  • You do not need to add that head or the link yourself. You just need the file in the right directory with the right name as shown on the doc:

    enter image description here

    If you are still not seeing it, try hard refreshing the browser, stopping your development server, and starting again.