How to Set Up a Favicon in Payload CMS

Short answer: in Payload 3.x, the admin panel favicon is set in your Payload config under admin.meta.icons. This is an array of icon entries, and each entry gives the browser a link relationship, a file type and a URL. Your public website is a separate case. In a Payload 3 project it is a Next.js app, so its favicon comes from Next.js metadata or icon files in the frontend route group, not from the Payload admin settings. A favicon is the small image a browser shows in tabs, bookmarks and history. Before you configure either one, prepare the artwork as a simplified, square version of your logo.

Three separate things are called the "favicon"

Most confusion comes from three settings that look alike, so it helps to separate them before you change anything:

• Admin favicon: the browser-tab icon for the Payload admin panel. It is configured through admin.meta.icons.
• Admin graphics: the logo on the login screen and the small icon in the admin navigation. These are React components set under admin.components.graphics (Logo and Icon). They do not change the browser-tab icon.
• Frontend favicon: the icon visitors see on your public site. It is handled by your Next.js layout or file conventions.

Step 1: Prepare the favicon artwork

A full logo rarely reads well at favicon size. Start from a simplified mark, such as a monogram, symbol or single letter, and prepare it as vector artwork. Vector artwork is built from mathematically defined paths, not pixels, so it scales without blurring. Practical preparation steps:

• Use a square artboard and centre the mark with a small, consistent margin so it is not cropped or cramped.
• Convert any text to outlines (paths) so the icon does not depend on fonts being installed.
• Remove fine details, hairline strokes and small counters (the enclosed spaces inside letters such as o or e). They fill in or disappear at small sizes.
• Expand strokes to filled shapes where possible. Stroke widths can render inconsistently when the icon is scaled down.
• Check contrast against both light and dark browser tab backgrounds.
• Export a clean SVG without editor metadata, hidden layers or embedded raster images.
• Also export PNG versions and, if you want broad legacy coverage, a favicon.ico file as fallbacks.

A .svg extension does not guarantee true vector content. An SVG can wrap an embedded bitmap, which defeats the purpose of scalable artwork. To check, open the file in a vector editor or text editor and confirm it contains path data rather than an embedded image. Also confirm you have the right to use the logo before deploying it.

Commonly used sizes include 16×16 and 32×32 pixels for browser tabs and 180×180 pixels for the Apple touch icon. These are widespread conventions, not requirements set by Payload. The evidence for this guide did not confirm a definitive size list, so check current browser and platform guidance if you need exact specifications.

Step 2: Place the files in your project

Put the exported files in the public directory of your Payload project, for example public/favicon.svg, public/favicon.png and public/favicon.ico. Next.js serves files in public from the site root, so public/favicon.svg becomes available at /favicon.svg.

Step 3: Set the admin panel favicon (Payload 3.x)

Open payload.config.ts and add an icons array under admin.meta. List the SVG first and add a raster fallback for browsers that do not use SVG favicons:

import { buildConfig } from 'payload'

export default buildConfig({
  admin: {
    meta: {
      titleSuffix: '- My Site',
      icons: [
        {
          rel: 'icon',
          type: 'image/svg+xml',
          url: '/favicon.svg',
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '32x32',
          url: '/favicon.png',
        },
      ],
    },
  },
  // ...rest of your config
})

Older Payload 2.x releases used a different setting: a single favicon path under the admin meta options instead of an icons array. If your project is not on Payload 3, check the configuration reference for your installed version before copying this example.

Step 4: Set the frontend favicon (Next.js)

In a Payload 3 project, the admin panel and the public site usually live in separate route groups inside the Next.js app directory. Each group has its own root layout. Set the frontend icons in the frontend layout's metadata export:

// app/(frontend)/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.svg', type: 'image/svg+xml' },
      { url: '/favicon.ico', sizes: 'any' },
    ],
    apple: '/apple-touch-icon.png',
  },
}

Alternatively, you can add link tags pointing to the files in public directly in the frontend layout's head, or use Next.js icon file conventions. Because of the separate route groups, confirm that whichever method you pick is applied to the frontend layout and not only to the admin.

Optional: Make the SVG favicon adapt to dark mode

An SVG favicon can include a CSS media query so the mark changes colour when the browser uses a dark theme. Browser support for this varies, so keep a raster fallback in place:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #111; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..." />
</svg>

Step 5: Verify the result

• Restart the dev server or rebuild and redeploy so the config changes are picked up.
• Open each file URL (for example /favicon.svg) directly in the browser to confirm it is served and is not a 404.
• View the page source of the admin panel and of a frontend page, and confirm the expected link rel="icon" tags are present.
• Check the Network tab in your browser's developer tools to confirm the icon request succeeds.
• Browsers cache favicons aggressively. Test in a private window or another browser before deciding the change did not work.
• Zoom in on the tab icon at normal size and check that the mark is still legible. If not, simplify the artwork further.

Gaps to check against your own setup

No version-specific documentation, measurements or test results were supplied for this guide. The configuration keys above reflect the Payload 3.x admin.meta.icons approach and the standard Next.js metadata API. Field names and defaults can change between releases, so confirm them against the documentation for your installed Payload and Next.js versions. If you use a custom frontend outside Next.js, set its favicon with that framework's own head or metadata mechanism.