feat!: replaces admin.favicon with admin.icons

Author: jacobsfletch

packages/next/src/layouts/Root/index.tsx

@@ -26,6 +26,11 @@ const merriweather = Merriweather({
   weight: ['400', '900'],
 })
 
+export const metadata = {
+  description: 'Generated by Next.js',
+  title: 'Next.js',
+}
+
 export const RootLayout = async ({
   children,
   config: configPromise,

packages/next/src/utilities/meta.ts

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import type { Icon } from 'next/dist/lib/metadata/types/metadata-types.js'
 import type { SanitizedConfig } from 'payload/types'
 
 import { payloadFaviconDark, payloadFaviconLight, payloadOgImage } from '@payloadcms/ui/assets'
@@ -13,38 +14,35 @@ export const meta = async (args: {
 
   const titleSuffix = config.admin.meta?.titleSuffix ?? '- Payload'
 
-  const customFavicon = config.admin.meta?.favicon
-  const customFaviconFiletype = customFavicon?.split('.').pop()
-  const customFaviconMediaType = `image/${customFaviconFiletype}`
-
-  const favicon = customFavicon ?? payloadFaviconLight?.src
   const ogImage = config.admin?.meta?.ogImage ?? payloadOgImage?.src
 
+  const customIcons = config.admin.meta.icons as Metadata['icons']
+
+  let icons = customIcons ?? []
+
+  const payloadIcons: Icon[] = [
+    {
+      type: 'image/png',
+      rel: 'icon',
+      sizes: '32x32',
+      url: payloadFaviconDark?.src,
+    },
+    {
+      type: 'image/png',
+      media: '(prefers-color-scheme: dark)',
+      rel: 'icon',
+      sizes: '32x32',
+      url: payloadFaviconLight?.src,
+    },
+  ]
+
+  if (customIcons && typeof customIcons === 'object' && Array.isArray(customIcons)) {
+    icons = payloadIcons.concat(customIcons)
+  }
+
   return Promise.resolve({
     description,
-    icons: [
-      ...(customFavicon
-        ? [
-            {
-              type: customFaviconMediaType,
-              rel: 'icon',
-              url: favicon,
-            },
-          ]
-        : [
-            {
-              type: 'image/png',
-              rel: 'icon',
-              url: payloadFaviconDark?.src,
-            },
-            {
-              type: 'image/png',
-              media: '(prefers-color-scheme: dark)',
-              rel: 'icon',
-              url: payloadFaviconLight?.src,
-            },
-          ]),
-    ],
+    icons,
     keywords,
     metadataBase: new URL(
       config?.serverURL ||

packages/payload/package.json

@@ -149,6 +149,7 @@
     "get-port": "5.1.1",
     "graphql-http": "^1.22.0",
     "mini-css-extract-plugin": "1.6.2",
+    "next": "^14.3.0-canary.7",
     "nodemon": "3.0.3",
     "object.assign": "4.1.4",
     "object.entries": "1.1.6",

packages/payload/src/config/schema.ts

@@ -68,7 +68,13 @@ export default joi.object({
     }),
     logoutRoute: joi.string(),
     meta: joi.object().keys({
-      favicon: joi.string(),
+      icons: joi
+        .alternatives()
+        .try(
+          joi.array().items(joi.alternatives().try(joi.string(), joi.object())),
+          joi.object(),
+          joi.string().allow(null),
+        ),
       ogImage: joi.string(),
       titleSuffix: joi.string(),
     }),

packages/payload/src/config/types.ts

@@ -1,6 +1,7 @@
 import type { I18nOptions, TFunction } from '@payloadcms/translations'
 import type { Options as ExpressFileUploadOptions } from 'express-fileupload'
 import type GraphQL from 'graphql'
+import type { Metadata as NextMetadata } from 'next'
 import type { DestinationStream, LoggerOptions, P } from 'pino'
 import type React from 'react'
 import type { default as sharp } from 'sharp'
@@ -460,14 +461,15 @@ export type Config = {
     }
     /** The route for the logout page. */
     logoutRoute?: string
-    /** Base meta data to use for the Admin panel. Included properties are titleSuffix, ogImage, and favicon. */
+    /** Base meta data to use for the Admin Panel. Included properties are titleSuffix, ogImage, and favicon. */
     meta?: {
       /**
-       * Public path to an icon
+       * An array of Next.js metadata objects that represent icons to be used by devices and browsers.
        *
-       * This image may be displayed in the browser next to the title of the page
+       * For example browser tabs, phone home screens, and search engine results.
+       * @reference https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons
        */
-      favicon?: string
+      icons?: NextMetadata['icons']
       /**
        * Public path to an image
        *

packages/ui/src/assets/index.ts

@@ -1,4 +1,4 @@
-export { default as payloadFavicon } from '../assets/favicon.svg'
-export { default as payloadFaviconDark } from '../assets/favicon-dark.png'
-export { default as payloadFaviconLight } from '../assets/favicon-light.png'
 export { default as payloadOgImage } from '../assets/og-image.png'
+export { default as payloadFavicon } from '../assets/payload-favicon.svg'
+export { default as payloadFaviconDark } from '../assets/payload-favicon-dark.png'
+export { default as payloadFaviconLight } from '../assets/payload-favicon-light.png'