---
title: Next.js Favicon Generator
description: Add a full favicon and app icon set to a Next.js project. File conventions for the App Router and Pages Router, the metadata API, and manifest.json.
canonical: https://favicontools.com/platforms/nextjs-favicon
---

# Next.js Favicon Generator

Next.js resolves icons from files rather than from link tags you write by hand. Put the right filename in the right directory and the framework emits the markup for you.

## How Next.js resolves icons

In the App Router, any file named icon, apple-icon, or favicon in the app directory becomes an icon route. Next.js reads the file, works out the dimensions, and injects the matching link tag into the document head at build time. You do not write the link tags yourself.

The Pages Router has no such convention. There you place files in public and declare them in a custom Head, which is the same manual work as any other framework.

## Where the files go (App Router)

```
app/
  favicon.ico  <- add  # browser tabs, legacy
  icon.png  <- add  # 512x512 source
  apple-icon.png  <- add  # 180x180, iOS
  layout.tsx
public/
  manifest.json  <- add  # PWA install metadata
  android-icon-192x192.png  <- add
  android-icon-512x512.png  <- add
```

Files marked add are the ones our generator exports. Everything else is a stock Next.js project.

## What each file does

| File | Purpose | Consumed by |
| --- | --- | --- |
| app/favicon.ico | Multi-resolution tab icon | All browsers, RSS readers |
| app/icon.png | Primary PNG icon, scaled by Next.js | Modern browsers |
| app/apple-icon.png | Home screen icon, 180x180 | iOS Safari |
| public/manifest.json | Install metadata and icon list | Android, PWA installs |

## Design for the smallest size first

- 16x16
- 32x32
- 48x48
- 96x96
- 180x180

Rendered at true pixel dimensions. A mark that survives the 16px swatch survives everywhere; one that only reads at 180px will be mush in a tab.

## Linking the manifest

```tsx
// app/layout.tsx
export const metadata = {
  manifest: "/manifest.json",
};
```

Icons themselves need no metadata entry: the file convention covers them. The manifest is the one thing you still declare.

> **Pages Router is different:** The app directory conventions do nothing in pages/. Put your icons in public/ and declare them inside next/head, or the tags simply won't be emitted.

## Next.js favicon FAQ

### Why is my Next.js favicon not updating?

Browsers cache favicons aggressively and separately from the page. Hard-refresh, then confirm the file itself changed by opening /favicon.ico directly. If the old icon still loads there, the build didn't pick up your file.

### Do I need favicon.ico if I have icon.png?

Keep both. icon.png covers modern browsers at higher quality, while favicon.ico is what older browsers, feed readers, and some link-preview crawlers still request by path.

### Where does apple-icon.png go?

Directly in the app directory, as a 180x180 PNG. Next.js generates the apple-touch-icon link tag from it. iOS ignores transparency, so give it a solid background.