Sling Academy
Home/Next.js/How to add a Favicon to a Next.js app (updated)

How to add a Favicon to a Next.js app (updated)

Last updated: June 08, 2023

A favicon of a web app is a small icon that serves as branding for the website. It is typically displayed at the top of a browser’s window, next to the page’s title, and also in the bookmarks list. This little thing helps users quickly identify your web app with others when they have multiple tabs opened or many bookmarked pages. It also adds to the overall branding consistency, and their absence might be seen as unprofessional.

This article shows you how to add a favicon (in general, the file extension of a favicon can be .ico or .png) into a Next.js project through a few easy steps. You’ll learn how to get the job done in both scenarios:

  • Your project uses the /app directory (Next.js 13 and later).
  • Your project uses the traditional /pages directory.

Step 1: Preparation

This step is the same for /app and /pages.

Copy your favicon file (my one named favicon.ico) to the public folder located in your project root directory (create one if it doesn’t exist). The default favicon will be overwritten.

Note: If you chose to use App Router, you can also place your favicon file right in the /app directory (this is equivalent to storing your favicon in the /public directory):

Depending on which folder you are using to store your routes (page components), choose one (and only one) of the following two options.

For /app directory (Next.js 13+)

What you need to do is to link to your favicon file in your root layout file. If you’re using TypeScript, edit the app/layout.tsx file:

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      {/* add this */}
      <head>
        <link rel='icon' href='/favicon.ico'/>
      </head>
      
      <body>{children}</body>
    </html>
  );
}

If you’re using JavaScript, the root layout file will be app/layout.js:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html lang='en'>
      {/* add this */}
      <head>
        <link rel='icon' href='/favicon.ico' />
      </head>

      <body>{children}</body>
    </html>
  );
}

The result (you will see my favicon is a white S in the center of a green square):

For /pages directory

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

import '../styles/globals.css'

// 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;

If you don’t like to touch the pages/_app.js file, you can set up the favicon in the pages/_document.js file as well (create one if it doesn’t exist yet):

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang='en'>
      <Head>
        <link rel='shortcut icon' href='/favicon.ico' />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Done!

Conclusion

Setting up a favicon in Next.js can be done in just a couple of minutes, but the value of this work is significant. If you find errors or outdated content in the tutorial, please let me know by leaving a comment. I’ll recheck and update it as necessary. Happy coding & have a nice day!

Next Article: How to Dockerize a Next.js App for Production

Previous Article: How to Add Google Analytics to Your Next.js App

Series: Next.js: Configuration & Deployment

Next.js

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported