Next.js Discord

Discord Forum

Clarification on icons and manifest in app router metadata files?

Unanswered
declspecl posted this in #help-forum
Open in Discord
Hi all!
I've read the docs many times on how to incorporate icons/favicons as well as how to structure the manifest.ts file, but I'm still a bit confused and haven't been able to find a lot of info online about it.
The way I have my site right now is by having my 48x48 favicon.ico, my 180x180 apple-icon.png, and my 1280x720 opengraph-image.png in the root app directory. Then, I also have a /icons folder where I have 4 files named icon{}.png for 1-4 respectively. These all work fine, but the docs on the manifest file show putting metadata about the favicon in the icons attribute as well, so I assume I should do it for all my icons, so this is what my manifest icons look like:
icons: [
    {
        src: "/favicon.ico",
        sizes: "any",
        type: "image/x-icon"
    },
    {
        src: "/apple-icon.png",
        sizes: "180x180",
        type: "image/png"
    },
    {
        src: "/opengraph-image.png",
        sizes: "1280x720",
        type: "image/png"
    },
    {
        src: "/icons/icon1.png",
        sizes: "16x16",
        type: "image/png"
    },
    {
        src: "/icons/icon2.png",
        sizes: "32x32",
        type: "image/png"
    },
    {
        src: "/icons/icon3.png",
        sizes: "192x192",
        type: "image/png"
    },
    {
        src: "/icons/icon4.png",
        sizes: "512x512",
        type: "image/png"
    }
]
but I actually get an error: Error while trying to use the following icon from the Manifest: http://localhost:3000/favicon.ico (Resource size is not correct - typo in the Manifest?), and in devtools, the link tag for my favicon.ico is <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="48x48"> so I changed the manifest info for favicon.ico to have sizes: "48x48", and while it gets rid of the error, I do not believe this is how favicons should be working, and the favicon doesnt show in google searches, which I think this might be the reason why. (more info in comment)

2 Replies

I have also changed my favicon size to 16x16 and 32x32, but the same problem keeps happening. I have done multiple google url inspections to try to fix it, but still get the same problem. If someone could provide some guidance, I would really appreciate it. Thanks!
bump