#Clarification on icons and manifest in app router metadata files?

3 messages · Page 1 of 1 (latest)

bright mica
#

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)
uneven finchBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

bright mica
#

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!