How to change favicon in nextjs.
Sure, here are the steps to change the favicon in Next.js:
Step 1: Place your new favicon.ico file in the public directory of your Next.js project.
Step 2: Open the next.config.js
file in the root of your project if it exists. If not, create a new file named next.config.js
in the root directory.
Step 3: Inside next.config.js
, add or modify the head
property within the module.exports
object. Use the next/head
component to set the new favicon. Here's an example:
// next.config.js
module.exports = {
// Other Next.js configurations...
// Setting up the custom favicon
head: {
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico',
},
],
},
};
Step 4: Save the changes to the next.config.js
file.
Step 5: Restart your Next.js development server to apply the changes. You can do this by stopping the server and running npm run dev
or yarn dev
again.
By following these steps, you'll successfully change the favicon in your Next.js application.