Join The JS Fam Discord Here
A chill community where we pair-program, launch products and learn together
\=====
I was asked this on the website chat, but looking a bit closer I'm sure the problem was related to image paths.
The boilerplate Next.js comes with an example of the built-in Head module and they also have a favicon linked.
All we need to do is make sure we have our Head module from Next imported and placed our link tag inside.
import Head from "next/head";
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" /> // <- HERE
</Head>
You can grab a favicon icon-sized image from places like https://favicon.io/, they make it super easy to convert different types to favicon.
You can place the image in your public folder or make a new folder called images / icons etc and place it there.
From your code you don't need to add public to your path as Next gives you access directly to static assets in the public directory.