Home / Next.js / How to easily add favicon to your Next.js project

How to easily add favicon to your Next.js project

Ali Bentaleb

Cover Image for How to easily add favicon to your Next.js project

Ali Bentaleb

September 4, 2022

A favicon is a favorite icon that can be associated to a website, and it is usually displayed above the address bar of the browser.

In this tutorial, we will explain how to add a favicon to all pages of your next.js project, and how to do if the favicon is not displayed.

Install Next.js project

You need to install next.js project first if you do not have it using

npx create-next-app@latest my-app

You can learn more on how to setup your next.js project on this link

Draw your favicon

You can either your favicon using simply paint or any other tool that you are familiar with, and save the file with png extension for example or ico if you have a proper tool for icons.

In our case we write favicon in a nice font and we save the file like the below

Once you save it, copy it to a folder called public, it should be there with every next.js project

Create custom document

Next, we need to customize our document so that every page will have the same structure and so every page will show the favicon

Create pages/_document.js

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

export default function Document() {
  return (
    <Html>
      <Head>
      <link rel="icon" href="/favicon.png" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Now, all our pages will have the header in which the favicon is linked

script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7011429793744057" crossorigin="anonymous">

Test the configuration

Create page.js and insert the following

export default function Page(){

    return (<div>Hello</div>)
}

Now, run http://localhost:3000/page and you should see your favorite icon displayed as the following

nextjs favicon in the top browsing url

What to do if favicon not showing

You need to check these steps if your favicon is not showing

Make sure first that your favicon file has been placed under public folder , and you can access it in the browser using http://localhost:3000/favicon.extension
Check that in _document, the link you provided is correct, if you place the file directly under public folder, you should be able to link it with slash using href="/favicon.png", if put into a sub directory, provide the full path starting from public folder.
Check Next.js config file if any basePath has been provided instead of the default basePath, and provide the complete basePath based on that. For example if it is provided and basePath='/docs', then it means that the favicon location will be '/docs/favicon.ico' and so you need to adjust the link in _document with the right href. You can learn more about basepath in this link
Last but not least, always test on a new session, for example if you use chrome, opt for a guest user and test your page, that way you are sure that your browser is not showing any cache file