App SnapsApp Snaps
Open studio

nextjs · Free tool

Generate Favicons for Next.js — Free Favicon Generator

Next.js App Router can serve favicon.ico from the app/ directory and additional icons via the Metadata API. This page presets the favicon generator and shows the exact head/metadata wiring for Next.js 15.

Generate the pack below, drop files into app/ or public/, then paste the snippet into your root layout.

Open generatorFull Launch Kit

Sizes & formats

SizeUse
16×16Browser tab / bookmarks
32×32Retina favicon
48×48Windows site icon
96×96Android Chrome shortcut
180×180apple-touch-icon
SVGModern browsers

Generate now

Focused generator for this tool only — files stay on your device. For every pack (ICNS, Expo, Flutter, Brand Kit, Store), open the full Launch Kit.

Full kit →

Focused tool

nextjs · Favicon pack

Open full Launch Kit

Live previews

Tap any tile to enlarge

Drop a logo to preview

Favicon, iOS, Android shapes, maskable, splash, OG — all live from one file.

How it works

  1. 1

    Generate icons

    Use the tool on this page and download the ZIP.

  2. 2

    Copy into app/ or public/

    favicon.ico can live in app/; PNGs often go in public/.

  3. 3

    Wire metadata

    Paste the icons field into your root layout Metadata export.

app/layout.tsx metadata

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My App",
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any" },
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
    ],
    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
  },
  manifest: "/manifest.webmanifest",
};

FAQ

Where does Next.js look for favicon.ico?
In the App Router, a favicon.ico file in the app/ directory is automatically picked up. You can also declare icons explicitly in metadata.
Should I use the file-based Metadata API icons?
Either works. Explicit metadata.icons is clearer when you ship multiple PNG sizes and an apple-touch-icon.
What size should a favicon be?
Ship a multi-size favicon.ico with 16, 32, and 48 px, plus PNG links for 32×32 and an apple-touch-icon at 180×180. Chromium PWAs also want 192 and 512 — generate those in the PWA icon tool.
Do I still need favicon.ico?
Yes for legacy browsers, older crawlers, and some Windows surfaces. Modern sites should also serve PNG and optional SVG favicons via <link rel="icon">.
How do I add a favicon in Next.js?
Place favicon.ico in app/ or public/, and add apple-touch-icon plus PNG icons. Or copy the head.html snippet from the export ZIP into your root layout metadata.
Can I make a transparent favicon?
Yes. Turn off fill background in the controls so PNG favicons keep alpha. ICO entries are PNG-compressed and preserve transparency in current browsers.

Related tools

Guides