Favicon generator for Next.js

Use App Router metadata icons or classic public/ assets for full Next.js support.

Next.js App Router

Generate your favicon package first, then follow the steps below to integrate with Next.js.

Installation steps

1
Download your favicon package and place PNG/ICO/SVG files in public/.
2
Option A: Use file-based metadata — add icon.png and apple-icon.png in app/.
3
Option B: Export icons via metadata in app/layout.tsx (recommended below).
4
Include site.webmanifest in public/ for PWA support.
5
Deploy and verify /favicon.ico and /favicon.svg respond with 200.

Code & configuration

Copy and adapt for your Next.js project

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

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    shortcut: "/favicon.ico",
    apple: "/apple-touch-icon.png",
  },
  manifest: "/site.webmanifest",
};

Pro tips

Next.js 13+ automatically detects app/icon.ico and app/apple-icon.png.
Metadata API icons override default Next favicons when explicitly set.

Files to deploy

favicon.ico

favicon.svg

favicon-96x96.png

apple-touch-icon.png

android-chrome-192x192.png

android-chrome-512x512.png

site.webmanifest