How to change a favicon in Next.js App
In this tutorial, we are going to learn about how to change a default favicon in the next.js app.
Changing the favicon
-
Open the next.js app in your favorite code editor.
-
Navigate to the
publicfolder and add a newfaviconby replacing the old one. -
Now, add the
faviconto yourpages<Head>component like this.
pages/index.js
import Head from 'next/head'
export default function Home() {
return (
<div className="container">
<Head>
<title>Next App</title>
<link rel="icon" href="/favicon.ico" /> </Head>
<p>other code goes here..</p>
</div>
)
}Note: The favicon.ico file path should be /favicon.ico not /public/favicon.ico.
- Restart the development server by running the
npm run devcommand and reload your next.js app to see a new favicon.
Similarly, if you have a favicon in .png or .jpg format then you can follow the above steps.
- Share:
