From 6f35c356fed5d6813d470ad20574e398a7f8e5eb Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <67977755+JessChowdhury@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:01:46 +0100
Subject: [PATCH] fix: custom meta icons getting overwritten by default icon
 (#7466)

## Description

Issue reported by Trading Point.

Payload favicon is still shown even when a custom icon is provided.

To replicate add to Payload config:
```ts
  admin: {
    meta: {
      icons: [
        {
          url: '/images/test.jpg',
          fetchPriority: 'high',
          sizes: '16x16',
        },
      ],
    },
  },
```

- [X] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [X] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [ ] I have added tests that prove my fix is effective or that my
feature works
- [X] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation
---
 packages/next/src/utilities/meta.ts |  9 ++++-----
 test/admin-root/e2e.spec.ts         | 10 ++++++++++
 test/admin/e2e/1/e2e.spec.ts        | 22 +++++-----------------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/next/src/utilities/meta.ts b/packages/next/src/utilities/meta.ts
index df27015cb..8ef77660f 100644
--- a/packages/next/src/utilities/meta.ts
+++ b/packages/next/src/utilities/meta.ts
@@ -1,6 +1,5 @@
 import type { Metadata } from 'next'
-import type { Icon } from 'next/dist/lib/metadata/types/metadata-types.js'
-import type { MetaConfig } from 'payload'
+import type { IconConfig, MetaConfig } from 'payload'
 
 import { payloadFaviconDark, payloadFaviconLight, staticOGImage } from '@payloadcms/ui/assets'
 import * as qs from 'qs-esm'
@@ -24,7 +23,7 @@ export const meta = async (args: { serverURL: string } & MetaConfig): Promise<an
     titleSuffix,
   } = args
 
-  const payloadIcons: Icon[] = [
+  const payloadIcons: IconConfig[] = [
     {
       type: 'image/png',
       rel: 'icon',
@@ -40,10 +39,10 @@ export const meta = async (args: { serverURL: string } & MetaConfig): Promise<an
     },
   ]
 
-  let icons = customIcons ?? payloadIcons // TODO: fix this type assertion
+  let icons = payloadIcons
 
   if (customIcons && typeof customIcons === 'object' && Array.isArray(customIcons)) {
-    icons = payloadIcons.concat(customIcons) // TODO: fix this type assertion
+    icons = customIcons
   }
 
   const metaTitle = `${title} ${titleSuffix}`
diff --git a/test/admin-root/e2e.spec.ts b/test/admin-root/e2e.spec.ts
index 18368141c..49034b792 100644
--- a/test/admin-root/e2e.spec.ts
+++ b/test/admin-root/e2e.spec.ts
@@ -60,4 +60,14 @@ test.describe('Admin Panel (Root)', () => {
     expect(pageURL).toBe(url.global('menu'))
     expect(pageURL).not.toContain('/admin')
   })
+
+  test('ui - should render default payload favicons', async () => {
+    await page.goto(url.admin)
+    const favicons = page.locator('link[rel="icon"]')
+    await expect(favicons).toHaveCount(2)
+    await expect(favicons.nth(0)).toHaveAttribute('sizes', '32x32')
+    await expect(favicons.nth(1)).toHaveAttribute('sizes', '32x32')
+    await expect(favicons.nth(1)).toHaveAttribute('media', '(prefers-color-scheme: dark)')
+    await expect(favicons.nth(1)).toHaveAttribute('href', /\/payload-favicon-light\.[a-z\d]+\.png/)
+  })
 })
diff --git a/test/admin/e2e/1/e2e.spec.ts b/test/admin/e2e/1/e2e.spec.ts
index 128b9f899..4e4b304b6 100644
--- a/test/admin/e2e/1/e2e.spec.ts
+++ b/test/admin/e2e/1/e2e.spec.ts
@@ -125,19 +125,6 @@ describe('admin1', () => {
       await expect(page.title()).resolves.toMatch(/- Custom CMS$/)
     })
 
-    test('should render payload favicons', async () => {
-      await page.goto(postsUrl.admin)
-      const favicons = page.locator('link[rel="icon"]')
-      await expect(favicons).toHaveCount(4)
-      await expect(favicons.nth(0)).toHaveAttribute('sizes', '32x32')
-      await expect(favicons.nth(1)).toHaveAttribute('sizes', '32x32')
-      await expect(favicons.nth(1)).toHaveAttribute('media', '(prefers-color-scheme: dark)')
-      await expect(favicons.nth(1)).toHaveAttribute(
-        'href',
-        /\/payload-favicon-light\.[a-z\d]+\.png/,
-      )
-    })
-
     test('should render custom meta description from root config', async () => {
       await page.goto(`${serverURL}/admin`)
       await expect(page.locator('meta[name="description"]')).toHaveAttribute(
@@ -159,10 +146,11 @@ describe('admin1', () => {
     test('should render custom favicons', async () => {
       await page.goto(postsUrl.admin)
       const favicons = page.locator('link[rel="icon"]')
-      await expect(favicons).toHaveCount(4)
-      await expect(favicons.nth(2)).toHaveAttribute('href', /\/custom-favicon-dark\.[a-z\d]+\.png/)
-      await expect(favicons.nth(3)).toHaveAttribute('media', '(prefers-color-scheme: dark)')
-      await expect(favicons.nth(3)).toHaveAttribute('href', /\/custom-favicon-light\.[a-z\d]+\.png/)
+
+      await expect(favicons).toHaveCount(2)
+      await expect(favicons.nth(0)).toHaveAttribute('href', /\/custom-favicon-dark\.[a-z\d]+\.png/)
+      await expect(favicons.nth(1)).toHaveAttribute('media', '(prefers-color-scheme: dark)')
+      await expect(favicons.nth(1)).toHaveAttribute('href', /\/custom-favicon-light\.[a-z\d]+\.png/)
     })
 
     test('should render custom og:title from root config', async () => {