How to easily add favicon to your Next.js project
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
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
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
Conclusion
We have seen how add a favicon to next.js project and how to debug if the icon is not displayed.
