Configure a favicon with next-seo

The short answer

next-seo has no dedicated favicon setting. You add favicons through its additionalLinkTags prop, which accepts an array of link-tag objects. Each object describes one link element, such as rel, href, sizes and type. You can set this prop on DefaultSeo in your custom App so every page gets the icons, or on NextSeo for a single page. The icon files themselves live in your public folder. next-seo only writes the link tags that point to them.

Most of the work is in the artwork, not the configuration. A favicon is the smallest place your logo will appear. It usually needs a simplified, square version of the vector mark, exported as an SVG plus raster fallbacks. If you want the icon to adapt to dark browser themes, you can either embed a color-scheme media query inside the SVG or supply separate light and dark files.

One scope note. next-seo is built around the Next.js Pages Router, where it injects tags into the document head. If your project uses the App Router, Next.js provides its own metadata API and icon file conventions, and those are generally the better fit there. The steps below assume the Pages Router.

Prepare the icon artwork

Start from the editable vector master of the logo, not from a downloaded PNG or a screenshot. A file ending in .svg, .ai or .eps does not guarantee editable paths. An SVG can simply wrap an embedded raster image, and a PDF or EPS may contain only a raster preview. Open the file in a vector editor and confirm that the shapes are selectable paths with anchor points before you build on it.

• Pick the mark, not the full lockup. Wordmarks and taglines become illegible at favicon sizes, so a symbol, monogram or single letter usually works better.
• Place the mark on a square artboard and set a square viewBox, such as 0 0 32 32, so browsers do not stretch or crop it.
• Simplify the geometry. Remove thin strokes, fine gaps and small details that disappear at small sizes. Convert strokes to filled shapes so line weight does not change unexpectedly when the icon is scaled.
• Convert any text to outlines. A favicon SVG cannot rely on the visitor having your brand font installed.
• Keep the color count low and check contrast against both light and dark browser tab backgrounds.
• Clean the export. Remove editor metadata, hidden layers, unused definitions and any embedded images, and keep the file self-contained.

Then export a small set of files. The usual set is an SVG for browsers that support vector favicons, a favicon.ico or small PNG as a fallback, a larger PNG for the Apple touch icon, and, if you have a web app manifest, the PNG sizes the manifest references. Check the current requirements of the platforms you target for exact pixel sizes. None were supplied for this article.

Rights matter before any of this. Being allowed to download a logo is not the same as being allowed to simplify it, recolor it or ship it as your site icon. If the mark, its font or its trademark belongs to someone else, such as a client, a parent brand or a third party, confirm that you are permitted to make and publish a modified favicon version.

Add the favicon tags with next-seo

Put the icon files in the public folder so they are served from the site root. Then pass the link tags to DefaultSeo in the custom App:

// pages/_app.js
import { DefaultSeo } from 'next-seo';

export default function App({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo
        additionalLinkTags={[
          { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
          { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
          { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
          { rel: 'manifest', href: '/site.webmanifest' },
        ]}
      />
      <Component {...pageProps} />
    </>
  );
}

Leave out the manifest entry if you do not have a manifest file. If a page also renders NextSeo with its own additionalLinkTags, check the rendered head to confirm that the site-wide icons are still present and not duplicated. next-seo derives tag keys from attributes such as href and rel, and it offers keyOverride when you need to control deduplication yourself.

Dark mode variants

Dark-mode favicons respond to the visitor's browser or operating system color preference, through the prefers-color-scheme media feature. They do not follow a theme toggle inside your site, because the favicon is rendered outside your page's styles. There are two common ways to set them up.

Option 1: one SVG with an embedded media query

An SVG favicon can carry its own style block, so a single file switches colors by scheme. The next-seo configuration stays unchanged and just points to icon.svg. The path data below is a placeholder for your simplified mark.

<!-- icon.svg: keep the xmlns namespace attribute your editor exports on the svg element -->
<svg viewBox="0 0 32 32">
  <style>
    .mark { fill: #111111; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f5f5; }
    }
  </style>
  <path class="mark" d="...your simplified mark..." />
</svg>

This approach only works where the browser supports SVG favicons and applies the media query inside them. Support differs between browsers and versions, so keep the ICO or PNG fallback in place. Choose fallback colors that read acceptably on both light and dark tabs, because the fallback will not switch.

Option 2: separate files with media attributes

You can also export two raster or SVG files and add a media attribute to each link tag:

additionalLinkTags={[
  { rel: 'icon', href: '/favicon-light.png', type: 'image/png', media: '(prefers-color-scheme: light)' },
  { rel: 'icon', href: '/favicon-dark.png', type: 'image/png', media: '(prefers-color-scheme: dark)' },
  { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
]}

Check whether the TypeScript definitions in your installed version of next-seo accept a media property on link tags. If they do not, render these particular link elements directly with the next/head component instead of working around the types. Browser handling of media on icon links is also inconsistent, so again keep a neutral fallback.

As an editorial recommendation rather than a documented requirement, the single-SVG approach is easier to maintain because both color states live in one vector file that you edit alongside the logo master. Separate files make more sense when the dark variant needs a different shape, not just a different color, or when you want raster output you have checked pixel by pixel.

Final inspection

• View the page source or inspect the rendered head and confirm that each expected link tag appears once, with the correct rel, type and href.
• Open each icon path directly in the browser to confirm that it resolves and is not a missing-file error.
• Open icon.svg in a text editor and confirm that it contains path data, not an embedded image element holding a raster.
• Switch your operating system or browser between light and dark appearance and check the tab icon in each mode.
• Check the icon at its actual displayed size. If the mark turns into a blur, simplify the vector further rather than adding detail.
• Browsers cache favicons aggressively. If changes do not appear, test in a private window or after clearing the cache before assuming the configuration is wrong.

Gaps in the available evidence

No version-specific documentation, browser support data or platform icon size requirements were supplied for this article. The configuration patterns above reflect next-seo's general additionalLinkTags mechanism and standard favicon markup. Before shipping, confirm prop names and accepted attributes against the next-seo version in your project, and check current browser support for SVG favicons and color-scheme media queries.