Question 236787 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Favicon is not displayed in Next.js

I’m using Next.js (^13.4.7) with the App directory. I want to display favicon but it is not displayed. The favicon is in the public folder. The format is jpg.

If I go to http://localhost:3000/favicon.png the image is displayed.

// import { Inter } from "next/font/google";
import { Providers } from "@/app/providers";
import { Header } from "@/components/Header";
import Head from "next/head";

// const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "***",
  description: "***",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <Head>
        <link href={"/favicon.png"} rel={"icon"} sizes="any" />
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <body>
        <Providers>
          <Header />
          {children}
        </Providers>
      </body>
    </html>
  );
}
Tags:

2

Answers


  1. 0

    For next.js app directory, you need to keep the favicon file in the app directory and not the public directory.

    Along with icon, you can also add social media / opengraph images also in the app directory.

    Login or Signup to reply.
  2. 0

    With the app router (directory), do not add that Head or the link yourself. Instead, add the file in the right directory with the right name and extension 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search