Generated package

Next.js — App Router favicon package. Ready to install.

Download the correct Next.js — App Router favicon package, place every file in the right location, and follow the exact installation steps for this stack.

Stack-specific filesExact snippet locationsCopy-ready guide
Next.js9 files

Next.js — App Router

For Next.js App Router projects. Next.js metadata files go in app/ using special filenames. PWA manifest icon images and advanced dark-mode favicon files go in public/ because they need stable public URLs.

ZIP: favico-nextjs-app-router-modern-package.zip

Folder: favico-nextjs-app-router-modern-favicon/

  1. 1
    Download your favicon package.
    Download favico-nextjs-app-router-modern-package.zip for Next.js — App Router.
  2. 2
    Extract this package in your project.
    Extract it in your project root. The package contains:
    Package structure
    favico-nextjs-app-router-modern-favicon/
├── app/favicon.ico
├── app/icon.svg
├── app/icon1.png
├── app/apple-icon.png
├── app/manifest.json
├── public/favicon-dark.svg
├── public/favicon-dark-96x96.png
├── public/web-app-manifest-192x192.png
└── public/web-app-manifest-512x512.png
  3. 3
    Copy the favicon files to the correct location.
    Copy the generated files to app/ or src/app/ plus public/.
    Generated fileCopy toStatusPurpose
    favicon.icoapp/favicon.icoOptionalOptional classic browser fallback file. Keep it when useful, but do not link it by default in modern light/dark favicon snippets.
    favicon.svgapp/icon.svgRequiredLight-mode SVG favicon for modern browsers.
    favicon-96x96.pngapp/icon1.pngRequiredLight-mode PNG fallback favicon.
    apple-touch-icon.pngapp/apple-icon.pngRequirediPhone/iPad home screen icon.
    site.webmanifestapp/manifest.jsonRequiredWeb app manifest containing app metadata and PWA icon references.
    favicon-dark.svgpublic/favicon-dark.svgOptionalDark-mode SVG favicon used with prefers-color-scheme: dark.
    favicon-dark-96x96.pngpublic/favicon-dark-96x96.pngOptionalDark-mode PNG fallback favicon.
    web-app-manifest-192x192.pngpublic/web-app-manifest-192x192.pngRequired192×192 Android/PWA icon referenced by the web app manifest.
    web-app-manifest-512x512.pngpublic/web-app-manifest-512x512.pngRequired512×512 Android/PWA icon referenced by the web app manifest.
  4. 4
    Add the config snippet in app/layout.tsx or src/app/layout.tsx.
    app/layout.tsx or src/app/layout.tsx
    // app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  icons: {
    icon: [
      {
        url: "/favicon-dark.svg",
        type: "image/svg+xml",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/favicon-dark-96x96.png",
        type: "image/png",
        sizes: "96x96",
        media: "(prefers-color-scheme: dark)",
      },
    ],
  },
};
  5. 5
    Why this setup works.
    • Next.js App Router automatically detects special metadata files in app/.
    • Generated favicon.svg is renamed to app/icon.svg.
    • Dark-mode files stay in public/ because metadata URLs resolve from the website root.

  6. Support Favico Studio

    Satisfied with the result?

    If Favico Studio helped you create your favicon faster, you can support the creator and help keep this tool free, fast, and available for everyone.

    ♥Support the creator→
  7. 6
    Start your app and verify the favicon URLs.
    Run command
    npm run dev
    Verify URLs
    http://localhost:3000/icon.svg
http://localhost:3000/favicon-dark.svg
http://localhost:3000/manifest.json
http://localhost:3000/web-app-manifest-192x192.png
  8. 7
    Common mistakes to avoid.

    Using normal HTML link tags in App Router

    Wrong: Paste <link rel="icon"> tags into a page

    Correct: Use app/ metadata files and merge the dark-mode metadata snippet in app/layout.tsx

    App Router has special metadata conventions for icons and manifest files.

    Wrong App Router filename

    Wrong: app/favicon.svg

    Correct: app/icon.svg

    Next.js recognizes icon.svg, not favicon.svg, as the App Router metadata icon file.

  9. 8
    Final checklist.
    ✓ Correct stack selected.
    ✓ Correct package downloaded and extracted.
    ✓ Files copied to the exact folder shown in this guide.
    ✓ Config snippet added only when this stack requires it.
    ✓ Head/favicon snippet added to the exact head location shown in this guide.
    ✓ No /public/ or /static/ URL is used unless the framework explicitly requires it.
    ✓ favicon.ico is kept as fallback only, not actively linked as the main favicon.
    ✓ favicon.svg loads directly.
    ✓ favicon-dark.svg loads directly.
    ✓ site.webmanifest loads directly.
    ✓ Manifest icon PNG files load directly.
    ✓ Browser cache cleared and Favico Studio checker passes.