Streaming Metadata: Favicon Not Applied on Initial Load #76810
Description
Link to the code that reproduces this issue
https://github.com/ryanburns23/nextjs-streaming-metadata-bug
To Reproduce
- Open the deployed reproduction example in Chrome.
- 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/AWhich 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.