Table of Contents
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:
1import { Html, Head, Main, NextScript } from "next/document"23export default function Document() {4 return (5 <Html lang="en">6 <Head>7 <link8 rel="apple-touch-icon"9 sizes="180x180"10 href="/apple-touch-icon.png"11 />12 <link13 rel="icon"14 type="image/png"15 sizes="32x32"16 href="/favicon-32x32.png"17 />18 <link19 rel="icon"20 type="image/png"21 sizes="16x16"22 href="/favicon-16x16.png"23 />24 <link rel="manifest" href="/site.webmanifest" />25 </Head>26 <body>27 <Main />28 <NextScript />29 </body>30 </Html>31 )32}
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 the
favicon.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:
1<link2 rel="icon"3 type="image/png"4 href="https://www.codingdeft.com/favicon.ico"5/>
Do follow me on twitter where I post developer insights more often!