How to add Favicon to a Next.js app

Last updated on March 19, 2022 A Goodman Loading... One comment

This article shows you how to add a favicon (in general, the file extension of a favicon is .ico or .png) into a Next.js project through a few easy steps listed below.

Step 1: Copy your favicon file (my one named favicon.ico) to the public folder located at your project root directory (create one if it doesn’t exist):

Step 2: Edit your pages/_app.js file (create one if it doesn’t exist):

// import the Head component for appending elements to the head of the page
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* Add the favicon */}
      <Head>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      {/* Add the favicon */}
      {/* Note that the path doesn't include "public" */}

      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

The result (you will see my favicon is a little cute dog):

Done. Further reading:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments
Cr1stal
Cr1stal
2 months ago

It helped. Thanks!

Related Articles