Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Streaming Metadata: Favicon Not Applied on Initial Load #76810

Closed
ryanburns23 opened this issue Mar 4, 2025 · 1 comment · Fixed by #76915
Closed

Streaming Metadata: Favicon Not Applied on Initial Load #76810

ryanburns23 opened this issue Mar 4, 2025 · 1 comment · Fixed by #76915
Labels
linear: next Confirmed issue that is tracked by the Next.js team. Metadata Related to Next.js' Metadata API.

Comments

@ryanburns23
Copy link

ryanburns23 commented Mar 4, 2025 •
edited
Loading

Link to the code that reproduces this issue

https://github.com/ryanburns23/nextjs-streaming-metadata-bug

To Reproduce

  1. Open the deployed reproduction example in Chrome.
  2. Wait approximately 1.5 seconds for the metadata to stream in. Observe that the favicon does not update.

Additional context:

  • Clicking the button to navigate to "page2" correctly updates the favicon.
  • This issue only occurs on the initial page load.

Current vs. Expected behavior

Current behavior:

Next.js 15.2 introduced Streaming Metadata. When using streaming metadata in a project with dynamic routes and dynamic favicons, Chrome doesn't apply the favicon upon initial load. While the metadata and tags are correctly streamed and appended to the end of the tag once generated, Chrome fails to recognize and display the favicon initially.

Expected behavior:

The favicon should correctly update and display immediately after streaming metadata loads, even on initial page load.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:11 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6020
  Available memory (MB): 98304
  Available CPU cores: 12
Binaries:
  Node: 22.13.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.2.0
Relevant Packages:
  next: 15.2.2-canary.0 // Latest available version is detected (15.2.2-canary.0).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

  • Tested with Chrome 133.0.6943.142
  • This appears to be specifically related to Chrome's handling of dynamically streamed favicons.
  • Subsequent navigations to other routes with dynamic metadata correctly update the favicon, confirming that this issue is isolated to the initial page load scenario. Notably, the key difference during subsequent navigations is that metadata tags are appended directly to the <head>, rather than the <body> as seen on initial load. A potential solution could involve ensuring that initially streamed metadata tags are also appended to the <head> instead of the <body>.
  • While potentially a browser-level issue, it may be valuable for Next.js to investigate possible workarounds or mitigations.
@github-actions github-actions bot added the Metadata Related to Next.js' Metadata API. label Mar 4, 2025
@ztanner ztanner added the linear: next Confirmed issue that is tracked by the Next.js team. label Mar 4, 2025
@huozhi huozhi mentioned this issue Mar 7, 2025
Merged
@jjbeach
Copy link

jjbeach commented Mar 7, 2025

I can also confirm this is a bug in Next 15.2. I'm observing it on Safari, too.

@ryanburns23 I fixed this for our app by inserting vanilla favicon link elements in an App Router layout component where it was needed like so:

{merchantThemeData?.faviconImageSrc && (
  <>
    <link
      rel="icon"
      href={imageKitUrlBuilder({
        path: merchantThemeData.faviconImageSrc,
        width: 30,
        height: "30",
      })}
      sizes="30x30"
    />
    <link
      rel="apple-touch-icon"
      href={imageKitUrlBuilder({
        path: merchantThemeData.faviconImageSrc,
        width: 180,
        height: "180",
      })}
      sizes="180x180"
    />
  </>
)}

It appears with this hack, server is compiling the favicon links it in <head>, but it's anti-pattern so hopefully this get's resolved soon @ztanner. 🙏

@huozhi huozhi closed this as completed in 8941f8a Mar 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
linear: next Confirmed issue that is tracked by the Next.js team. Metadata Related to Next.js' Metadata API.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[metadata] re-insert icons to head for streamed metadata vercel/next.js
3 participants
@jjbeach @ztanner @ryanburns23