You might have seen the following default favicon in your Next.js site and want to change it.
In this article, we will see how to do the same.
Creating a favicon
You can use sites like https://favicon.io/favicon-generator/ to generate a favicon.
It will generate the favicon of different sizes and also you can generate icons for adding your website to the home screen on mobile devices.
Now download the generated favicon and place the files in the public folder:
It is not necessary to have all the files. To add favicon, the
favicon.icofile is sufficient
Including the favicon
You can include the favicon file along with manifest files in the _document.js file as shown below:
import { Html, Head, Main, NextScript } from "next/document"
export default function Document() {
return (
<Html lang="en">
<Head>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
If you want to just add the favicon and not the manifest file, the above step is not required,
all you need to do is replace thefavicon.icoin the public directory with the one you want and the browser will use it automatically.
If you reload the page now, you should be able to see the favicon loaded:
You can load favicon from other sites as well like shown below:
<link
rel="icon"
type="image/png"
href="https://www.codingdeft.com/favicon.ico"
/>
Top comments (0)