CODEWITHSUNDEEP
next.jsfaviconnextjs14
Krizsa
Krizsa

Reputation: 47

Next.js 14 overwrites my favicon when deployed to Vercel

I am trying to change the default favicon on a Next.js 14 project.

I deleted the original favicon.ico file, and I deleted all other nextjs related svg-s, and I put my file named favicon.ico to the top of the app and public folders.

When I run it locally it works. If I build it and start it locally it works.

But when deployed to the Vercel host servers, it gets overwritten somehow and the favicon becomes the default one. Also I cannot export metadata in the layout file because I use contexts, so that file needs to be client-side. Is there a way to change the favicon on the Vercel site at my project, e.g.: in the settings , or am I missing something?

Upvotes: 1

Views: 1096

Answers (2)

Dhyan TD
Dhyan TD

Reputation: 73

Even I faced this issue then i found a post in redit regarding same which worked for me, read here.

so now, Delete/update the favicon and then delete '.next' directory then restart the app

Upvotes: 1

karina-borges
karina-borges

Reputation: 11

Since you need to use contexts and the layout file must be a client component, you can still add a custom Head component inside your layout file.

Create a component CustomHead.tsx

'use client';

import Head from 'next/head';

export default function CustomHead() {
  return (
    <Head>
      <link rel="icon" href="/favicon.ico" />
    </Head>
  );
}

Include the custom Head component in your layout.tsx file:

'use client';

import CustomHead from '../components/CustomHead';
import { MyContextProvider } from '../context/MyContext'; // Example context

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MyContextProvider>
          <CustomHead />
          {children}
        </MyContextProvider>
      </body>
    </html>
  );
}

After making these changes, clear your browser cache and rebuild your project. Sometimes the old favicon can be cached by the browser, which might cause it to display the wrong icon. Hope it works.

Upvotes: 1

Related Questions