I am migrating from using next/head to the new metadata api. All SEO related data is fetched from a custom CMS, so I need to use generateMetadata(). The favicon doesn't want to show up in the top of the browser. I've tried clearing cache or opening in incognito mode. All other metatags work as they should. The same url to the favicon worked in the next/head component.

I've made this util function to easily injecting all SEO data:

export function generatePageMetadata(generalContent, page) {
  const generalSEO = generalContent?.static?.seo;
  const pageSEO = page?.static?.seo;

  const title = pageSEO?.title ? `${pageSEO.title} | ${generalSEO.title}` : generalSEO.title;
  const description = pageSEO?.metaDescription || generalSEO.defaultMetaDescription;
  const openGraphImage = generalSEO?.displayImage?.url || null;

  return {
    title: title,
    description: description,
    openGraph: {
      title: title,
      description: description,
      images: openGraphImage ? [{ url: openGraphImage }] : [],
    },
    additionalLinkTags: [
      { rel: "icon", href: generalSEO.favicon?.url || "/favicon.ico" },
    ],
    additionalScriptTags: [
      {
        type: "application/ld+json",
        innerHTML: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Organization",
          url: "https://www.some-site.com",
          logo: generalSEO?.displayImage?.url || "/favicon.ico",
        }),
      },
    ],
    metadataBase: new URL('https://www.some-site.com'),
  };
}

And this is the implementation in the page component:

export async function generateMetadata() {
  const homePage = await fetchHomePage();
  const generalContent = await fetchGeneralContent();

  return generatePageMetadata(generalContent, homePage);
}

Any ideas?