Always collect static icons for all segments

packages/next/src/lib/metadata/resolve-metadata.ts

@@ -16,6 +16,7 @@ import type { LoaderTree } from '../../server/lib/app-dir-module'
 import type {
   AbsoluteTemplateString,
   IconDescriptor,
+  ResolvedIcons,
 } from './types/metadata-types'
 import type { ParsedUrlQuery } from 'querystring'
 import type { StaticMetadata } from './types/icons'
@@ -49,6 +50,8 @@ import { ResolveMetadataSpan } from '../../server/lib/trace/constants'
 import { PAGE_SEGMENT_KEY } from '../../shared/lib/segment'
 import * as Log from '../../build/output/log'
 
+type StaticIcons = Pick<ResolvedIcons, 'icon' | 'apple'>
+
 type MetadataResolver = (
   parent: ResolvingMetadata
 ) => Metadata | Promise<Metadata>
@@ -99,27 +102,18 @@ function mergeStaticMetadata(
   staticFilesMetadata: StaticMetadata,
   metadataContext: MetadataContext,
   titleTemplates: TitleTemplates,
-  isLastSegment: boolean
+  leafSegmentStaticIcons: StaticIcons
 ) {
   if (!staticFilesMetadata) return
   const { icon, apple, openGraph, twitter, manifest } = staticFilesMetadata
 
-  // Only pick up the static metadata if the current level is the last segment
-  if (isLastSegment) {
-    // file based metadata is specified and current level metadata icons is not specified
-    if (target.icons) {
-      if (icon) {
-        target.icons.icon.unshift(...icon)
-      }
-      if (apple) {
-        target.icons.apple.unshift(...apple)
-      }
-    } else if (icon || apple) {
-      target.icons = {
-        icon: icon || [],
-        apple: apple || [],
-      }
-    }
+  // Keep updating the static icons in the most leaf node
+
+  if (icon) {
+    leafSegmentStaticIcons.icon = icon
+  }
+  if (apple) {
+    leafSegmentStaticIcons.apple = apple
   }
 
   // file based metadata is specified and current level metadata twitter.images is not specified
@@ -158,15 +152,15 @@ function mergeMetadata({
   titleTemplates,
   metadataContext,
   buildState,
-  isLastSegment,
+  leafSegmentStaticIcons,
 }: {
   source: Metadata | null
   target: ResolvedMetadata
   staticFilesMetadata: StaticMetadata
   titleTemplates: TitleTemplates
   metadataContext: MetadataContext
   buildState: BuildState
-  isLastSegment: boolean
+  leafSegmentStaticIcons: StaticIcons
 }): void {
   // If there's override metadata, prefer it otherwise fallback to the default metadata.
   const metadataBase =
@@ -290,7 +284,7 @@ function mergeMetadata({
     staticFilesMetadata,
     metadataContext,
     titleTemplates,
-    isLastSegment
+    leafSegmentStaticIcons
   )
 }
 
@@ -774,6 +768,13 @@ export async function accumulateMetadata(
   }
 
   let favicon
+
+  // Collect the static icons in the most leaf node,
+  // since we don't collect all the static metadata icons in the parent segments.
+  const leafSegmentStaticIcons = {
+    icon: [],
+    apple: [],
+  }
   for (let i = 0; i < metadataItems.length; i++) {
     const staticFilesMetadata = metadataItems[i][1]
 
@@ -800,7 +801,7 @@ export async function accumulateMetadata(
       staticFilesMetadata,
       titleTemplates,
       buildState,
-      isLastSegment: i === metadataItems.length - 1,
+      leafSegmentStaticIcons,
     })
 
     // If the layout is the same layer with page, skip the leaf layout and leaf page
@@ -814,6 +815,24 @@ export async function accumulateMetadata(
     }
   }
 
+  if (
+    leafSegmentStaticIcons.icon.length > 0 ||
+    leafSegmentStaticIcons.apple.length > 0
+  ) {
+    if (!resolvedMetadata.icons) {
+      resolvedMetadata.icons = {
+        icon: [],
+        apple: [],
+      }
+      if (leafSegmentStaticIcons.icon.length > 0) {
+        resolvedMetadata.icons.icon.unshift(...leafSegmentStaticIcons.icon)
+      }
+      if (leafSegmentStaticIcons.apple.length > 0) {
+        resolvedMetadata.icons.apple.unshift(...leafSegmentStaticIcons.apple)
+      }
+    }
+  }
+
   // Only log warnings if there are any, and only once after the metadata resolving process is finished
   if (buildState.warnings.size > 0) {
     for (const warning of buildState.warnings) {

test/e2e/app-dir/metadata-icons-parallel-routes/app/@modal/default.js

@@ -0,0 +1,3 @@
+export default function Modal() {
+  return <p>modal</p>
+}

test/e2e/app-dir/metadata-icons-parallel-routes/app/layout.js

@@ -0,0 +1,10 @@
+export default function Root({ children, modal }) {
+  return (
+    <html>
+      <body>
+        {modal}
+        {children}
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/metadata-icons-parallel-routes/app/nested/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>page</p>
+}

test/e2e/app-dir/metadata-icons-parallel-routes/app/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>page</p>
+}

test/e2e/app-dir/metadata-icons-parallel-routes/metadata-icons-parallel-routes.test.ts

@@ -0,0 +1,24 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('app-dir - metadata-icons-parallel-routes', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should present favicon with other icons when parallel routes are presented', async () => {
+    const $ = await next.render$('/')
+    expect($('link[type="image/x-icon"]').length).toBe(1)
+    expect($('link[type="image/svg+xml"]').length).toBe(1)
+    expect($('link[rel="apple-touch-icon"]').length).toBe(1)
+  })
+
+  it('should override parent icon when both static icon presented', async () => {
+    const $ = await next.render$('/nested')
+    expect($('link[rel="icon"][type="image/png"]').length).toBe(1)
+  })
+
+  it('should inherit parent apple icon when child does not present but parent contain static apple icon', async () => {
+    const $ = await next.render$('/nested')
+    expect($('link[rel="apple-touch-icon"][type="image/png"]').length).toBe(1)
+  })
+})