Problems in Integrating Custom Favicon in Next.js Project Using JSX

Question

folder structure and new ico file image

I'm working on a Next.js project where I'm using JSX instead of TSX. I want to set a custom favicon for my website and ensure it appears correctly across all pages. However, I'm unsure about the proper integration process, especially considering I have separate layout and page components.

Here are the specifics: I'm using JSX instead of TSX in my Next.js project. I have separate layout (layout.jsx) and page (page.jsx) components. I want to set a custom favicon for my website. I've generated favicon files in ICO, PNG, and SVG formats.

I have tried every available solution but its still the same as always. Any proper solution would be appreaciable. Thank you.

Answer 1

Solution :

In your project, under app there will be default favicon.ico file, replace that with your custom favicon.ico file. Keep your favicon.ico file name as favicon.ico. The favicon image can only be located in the top level of app/.

Location : app/favicon.ico

app
├── favicon.ico

After replacing, clear history of browser & refresh page.

Please Read :

• Favicon : https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

If you have any doubts, then please leave a comment (I will update answer if necessary)