Fixing Favicon.ico and OpenGraph Image in Next.js

Fixing Overwritten favicon.ico and OpenGraph Image in Next.js

Issue

During the execution of npm run build in Next.js, the favicon.ico file in the out directory gets overwritten by a strange file from a template. The file inside the /app directory is completely different. The source of the copied or generated file is unknown.

Solution

Remove Duplicate favicon.ico

Since you now have a public/ directory, you should place the favicon.ico file exclusively inside the public/ directory. Remove the duplicate from src/app/:

src/app/favicon.ico

Having multiple favicon.ico files can cause conflicts during the build process.

Run Build Again

npm run build

If the above steps do not resolve the issue, please provide additional details about your project configuration (e.g., next.config.js, plugins, or custom scripts).

Steps to Move opengraph-image.png to public/

Move the file from its current location (src/app/) to the public/ folder:

/public/opengraph-image.png

Metadata Configuration

export const metadata = {
    title: 'Your Page Title',
    description: 'Your Page Description',
    openGraph: {
        images: '/opengraph-image.png',
    },
};

Example Metadata for Immo Estate

export const metadata = {
    openGraph: {
        title: 'Immo Estate',
        description: 'Your trusted platform for real estate leads.',
        url: 'https://immo.estate', // Your base URL
        siteName: 'Immo Estate',
        images: [
            {
                url: 'https://immo.estate/opengraph-image.png', // Absolute URL
                width: 1200,
                height: 630,
                alt: 'Immo Estate Open Graph Image',
            },
        ],
        locale: 'en_US',
        type: 'website',
    },
};