May 2026·5 min read

How to Add a Favicon to a Next.js App (2026)

Next.js 13+ App Router has a dedicated favicon system built in. You don't write link tags by hand — you drop files into the right directory and Next.js generates the metadata automatically. Here's exactly how it works.

The fast way: file-based favicons (App Router)

The App Router uses file naming conventions to generate favicon metadata. Place these files directly in your app/ directory:

File	What it generates
favicon.ico	rel="icon" sizes="any"
icon.png / icon.svg	rel="icon" type="image/png"
apple-icon.png	rel="apple-touch-icon"
opengraph-image.png	og:image meta tag

That's it. No layout.tsx edits needed for the basics. Next.js detects these files at build time and generates the correct HTML.

Step 1: Generate your favicon files

You need several sizes for full cross-browser and cross-platform coverage:

favicon.ico — multi-size ICO (16, 32, 48px) for legacy browsers
icon.png — 32×32 PNG for modern browsers
apple-icon.png — 180×180 PNG for iOS home screen
icon-192x192.png and icon-512x512.png — PWA icons

Upload your logo PNG or SVG to Snappicon and download a ZIP with every size pre-generated, including a copy-paste HTML snippet.

Step 2: Place files in app/

app/
  favicon.ico          ← browser tab (ICO bundle)
  icon.png             ← 32×32 for modern browsers
  apple-icon.png       ← 180×180 for iOS
  layout.tsx
  page.tsx

public/
  icon-192x192.png     ← PWA icons go in public/
  icon-512x512.png
  manifest.json

Step 3: Add PWA support via metadata

PWA icons and the web manifest need to be referenced in layout.tsx. Add them to the metadata export:

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://yourdomain.com"),
  title: "Your App",
  description: "Your app description",
  manifest: "/manifest.json",
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any" },
      { url: "/icon.png", type: "image/png", sizes: "32x32" },
    ],
    apple: [
      { url: "/apple-icon.png", sizes: "180x180", type: "image/png" },
    ],
  },
};

Pages Router (legacy)

If you're still on the Pages Router, add tags manually via next/head in pages/_app.tsx:

import Head from "next/head";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="icon" href="/icon.png" type="image/png" sizes="32x32" />
        <link rel="apple-touch-icon" href="/apple-icon.png" />
        <link rel="manifest" href="/manifest.json" />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

Verify it's working

Open DevTools → Elements → search for rel="icon"
Visit yourdomain.com/favicon.ico directly
Use a favicon checker tool to preview across browsers

Frequently asked questions

Can I use an SVG as a Next.js favicon?

Yes. Place icon.svg in your app/ directory. Next.js will serve it as the favicon. SVG favicons work in all modern browsers except Safari — include a favicon.ico fallback for full coverage.

Do I need to manually add link tags in Next.js?

No. With the App Router, dropping favicon.ico, icon.png, or apple-icon.png into app/ automatically generates the correct link tags. You only need manual tags for custom metadata objects or the Pages Router.

Why is my Next.js favicon not updating?

Browsers cache favicons aggressively. Hard refresh with Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows), or open a private window. In Chrome DevTools: Application → Clear storage → Favicons → Clear site data.

What is the correct apple-touch-icon size for Next.js?

180×180 PNG. Name the file apple-icon.png and place it in the app/ directory. Next.js will automatically generate the apple-touch-icon link tag.

Favicon generator →PWA icon generator →PWA icon sizes guide →

Generate your Next.js favicon set in one upload

Upload your logo and get favicon.ico, icon.png, apple-icon.png, PWA icons, manifest.json, and a copy-paste Next.js metadata snippet — all in one ZIP, free forever.

Generate for free