Next.js Favicon: App Router Icons, Sizes and Fixes

To add a favicon in Next.js with the App Router, put a favicon.ico file at the top of your app/ folder, and add an optional icon.png or icon.svg and an apple-icon.png anywhere in app/. Next.js reads each file and writes the matching <link> tags into the page head for you. In AI Icon Creator’s test on Next.js 16.3.8, create-next-app shipped with a favicon.ico already in place, so the job is usually to replace it.

This guide covers the file conventions, the tags Next.js really generates, an icon made in code, a dark-mode icon and what to check when the favicon doesn’t show.

How do you add a favicon in Next.js?

To add a favicon in Next.js, put an image file named favicon, icon or apple-icon in your app/ folder. Next.js’s documentation on the favicon, icon and apple-icon file conventions lists what each accepts and where it can live:

The steps:

1. Make your icon files. At minimum, a favicon.ico. Our favicon converter builds a pack with the .ico, an Apple touch icon and PNG sizes, and our PNG to ICO converter and SVG to ICO converter make just the .ico.
2. Copy favicon.ico to app/favicon.ico, replacing the default one.
3. Optionally add app/icon.png or app/icon.svg and app/apple-icon.png for an iPhone or iPad Home Screen.
4. Restart the dev server and hard-reload the tab, because browsers hold on to old favicons.

You can add several icons by numbering the file names, such as icon1.png and icon2.png. The documentation says numbered files sort lexically.

What link tags does Next.js generate for icons?

Next.js generates <link rel="icon"> and <link rel="apple-touch-icon"> tags from your files, and adds sizes, type and a cache-busting query string it reads from each file. We tested it: in AI Icon Creator’s test, we created an app with create-next-app, which installed Next.js 16.3.8, built it with next build, ran next start and read the head of the home page for four setups.

What the test showed:

• A .ico gets sizes="48x48". Our favicon.ico held 16, 32 and 48 px images, and Next.js wrote sizes="48x48" and type="image/x-icon". The documentation’s example shows sizes="any", which it says is used for SVG files or when the size can’t be determined.
• A PNG gets its real size. A 512 px icon.png produced sizes="512x512", and a 180 px apple-icon.png produced rel="apple-touch-icon" with sizes="180x180".
• Every file-based icon has a hash. The href ends with a query string such as ?icon.…, which changes when the file changes.
• A file in public/ gets no tag. With only public/favicon.ico, the head had no icon link at all, though /favicon.ico still returned 200. Browsers ask for that path by default.
• Several files give several tags. Adding an icon.svg next to the PNG added a third link with sizes="any" and type="image/svg+xml".

For the sizes behind each file, our favicon sizes guide lists what a site needs, and Google’s favicon guidelines for Search ask for a square favicon of at least 8 × 8 px, recommending one larger than 48 × 48 px.

Can you generate a Next.js icon with code?

You can generate an icon or apple-icon with code by adding icon.tsx that default-exports a function returning an ImageResponse, but you can’t generate the favicon this way. The documentation says generated icons are statically optimised unless they use request-time APIs, and that you must use icon or a favicon.ico file instead of a generated favicon.

// app/icon.tsx
import { ImageResponse } from 'next/og';

export const size = { width: 32, height: 32 };
export const contentType = 'image/png';

export default function Icon() {
  return new ImageResponse(
    <div
      style={{
        fontSize: 24,
        background: '#2f5d45',
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#f7efe0',
      }}
    >
      T
    </div>,
    { ...size }
  );
}

In our test, this file produced <link rel="icon" href="/icon?…" type="image/png" sizes="32x32"/> next to the favicon.ico tag. A one-letter tile like this is a good fallback, but a designed symbol reads better. Try one:

How do you add a dark mode favicon in Next.js?

To add a dark mode favicon in Next.js, use the icons field in your metadata export and give the dark icon a media query. The documentation shows this form, and says to prefer the file-based API where possible.

// app/layout.tsx
export const metadata = {
  icons: {
    icon: [
      { url: '/icon-light.png' },
      { url: '/icon-dark.png', media: '(prefers-color-scheme: dark)' },
    ],
  },
};

We tested the same shape with two PNG files, and Next.js printed one <link rel="icon"> per entry, the second with media="(prefers-color-scheme: dark)". In that test there was no favicon.ico file, and /favicon.ico returned 404, so keep a favicon.ico as the fallback for tools that ask for it. When both exist, Next.js printed the file-based favicon.ico link first and the metadata link after it. Our guide to keeping an icon legible at small sizes helps you check both versions at 16 px.

Why isn’t my Next.js favicon showing?

A Next.js favicon usually doesn’t show because the file is in the wrong place, the browser cached the old one, or the file type isn’t allowed. Check these:

• Location. favicon.ico only works at the top level of app/. Use icon for anything deeper.
• File type. favicon must be .ico, and apple-icon must be .jpg, .jpeg or .png, not SVG.
• Cache. Restart the dev server and hard-reload. A deployed site can take longer, because browsers can cache /favicon.ico for a long time.
• The public/ folder. A public/favicon.ico is served at /favicon.ico but gets no link tag. Move it to app/favicon.ico if you want Next.js to add the tag and the cache-busting hash.
• View the source. Open the page source and look for rel="icon" in the head. If it isn’t there, Next.js didn’t pick your file up.
• Google. Google says favicon changes can take days to weeks to appear in results.

Using another builder or framework? See our guides to the Shopify favicon and the Webflow favicon.

Frequently asked questions

Where do I put the favicon in a Next.js App Router project?

You put the favicon at app/favicon.ico, at the top level of the app/ folder, according to Next.js’s documentation. The favicon convention only works there and only for .ico files. For a PNG or SVG icon, or an icon deeper in your routes, use the icon file convention instead.

What size should a Next.js favicon be?

A Next.js favicon should be a favicon.ico that holds 16, 32 and 48 px images, and Next.js reads the sizes from the file. In our test on Next.js 16.3.8, a .ico with those three sizes was written as sizes="48x48". Google recommends a favicon larger than 48 × 48 px, so also add a larger icon.png.

Can I use an SVG favicon in Next.js?

You can use an SVG favicon in Next.js by naming it icon.svg in the app/ folder, because the icon convention accepts .svg. In our test it produced a link with type="image/svg+xml" and sizes="any". The favicon file must be .ico, and apple-icon can’t be an SVG, so keep those as raster files.

How do I add an Apple touch icon in Next.js?

To add an Apple touch icon in Next.js, put an apple-icon.png (or .jpg) in the app/ folder, ideally 180 × 180 px. In our test, a 180 px file produced <link rel="apple-touch-icon" sizes="180x180" type="image/png"> with a cache-busting hash, so you don’t have to write the tag yourself.

How do I make a Next.js favicon with AI?

To make a Next.js favicon with AI, describe one simple symbol for your site, generate it in a few styles, pick the one that stays clear at 16 px and export it as a PNG. In AI Icon Creator you can compare styles side by side, then convert the PNG to favicon.ico and save it as app/favicon.ico.

Ready to make your favicon?