How to use icons in Metadata Files AND a `metadata` export #73599

thany · 2024-12-06T14:12:01Z

thany
Dec 6, 2024

Say I've got a nice icon.svg in my /app directory. This works great - Next.js generates the correct <link> tags. So far so good.

Now I want to ADD an icon that isn't supported by the Metadata Files feature:

export const metadata: Metadata = {
  icons: [
    { rel: 'mask-icon', url: '/site-icons/safari-pinned-tab.svg', color: '#0055a0' },
  ],
};

This will overwrite or disable (don't know which happens under the bonnet) all icons generated by the Metadata Files feature, leaving me with only the mask-icon one.

So the question is how do I go about ADDING one, instead of replacing all of them? I do want to keep using the Metadata Files feature, but I do also need to add a custom one.

If I put it like this:

export const metadata: Metadata = {
  icons: {
    other: [
      { rel: 'mask-icon', url: '/site-icons/safari-pinned-tab.svg', color: '#0055a0' },
    ],
  },
};

It doesn't work either, but the other way around from previous. This way I only get the icons from the Metadata Files feature.

These are all in the /app directory, in the layout.tsx. I'm on Next.js 15.0.3.

ciruz · 2024-12-11T12:24:57Z

ciruz
Dec 11, 2024

Hey @thany,

I encountered a similar issue recently using Next.js 14.2.5, where defining favicons via file-based metadata caused the exported metadata in the layout file (like custom mask-icon) to be ignored and not included in the generated <head>.

To troubleshoot, I tested the behavior on Next.js canary, and it worked as expected—file-based metadata and exported metadata (e.g., icons.other) were combined properly. However, when I tested the lastest v14 so Next.js 14.2.20, I found that the behavior had flipped: exported metadata overwrites file-based metadata, which aligns with what you’re describing with 15.0.3.

It seems this is a version-dependent bug or an intentional breaking change that hasn’t been clearly documented. Updating to the latest Next.js should resolve the issue for you, as it ensures both file-based and exported metadata work together seamlessly.

Hope this helps! 😊

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use icons in Metadata Files AND a `metadata` export #73599

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to use icons in Metadata Files AND a metadata export #73599

thany Dec 6, 2024

Replies: 1 comment

ciruz Dec 11, 2024

How to use icons in Metadata Files AND a `metadata` export #73599

thany
Dec 6, 2024

ciruz
Dec 11, 2024