How to add a favicon to a next.js static site?

Adding a favicon icon to a next.js static site in two simple steps

Step 1. Place your favicon.ico in /public

Everything under the public folder is automatically bundled by next.js

Some useful links:

Step 2. Add the favicon reference

Edit _document.js

Before

<Head />

After

<Head>
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
</Head>

Sign up for my tips newsletter

Always be Learning.