How to add Favicon to a Next.js app

Last updated on January 12, 2021 A Goodman Loading... Post a comment

This article shows you how to add a favicon 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 cute dog):

Done!

If you’d like to learn more about Next.js, check also our Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles