---
name: next-app-router-favicon
description: Next.js App Router requires both public/favicon.ico AND src/app/icon.png (512×512) — one file alone is not enough for all browsers and PWA
type: concept
---

# Next.js App Router — Favicon Requires Two Files

## The Problem

In Next.js 13+ App Router, placing only `public/favicon.ico` results in:
- Favicon works in most browsers (classic `.ico` fallback)
- But PWA manifest icon is missing
- Some browser address bars don't show the icon
- Lighthouse PWA audit fails

Placing only `src/app/icon.png` results in:
- Modern browsers work
- Older browsers or bookmark imports may not find the icon

## The Correct Setup

Both files are required:

```
public/
  favicon.ico        ← classic browsers, tab icon
src/
  app/
    icon.png         ← 512×512 PNG, App Router metadata API
    icon.tsx         ← optional: generated icon via ImageResponse
```

### `src/app/icon.png`

- Must be **exactly 512×512 pixels** (or at minimum 192×192)
- Next.js automatically serves it at `/_next/static/media/icon.png` and injects `<link rel="icon">` into `<head>`
- Also used as the PWA app icon

### `public/favicon.ico`

- Classic `.ico` format (can contain multiple sizes: 16×16, 32×32, 48×48)
- Served at `/favicon.ico` — browsers always check this URL first

## Metadata API Alternative

Instead of a static `icon.png`, you can generate it dynamically:

```tsx
// src/app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 512, height: 512 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    <div style={{ background: '#000', width: '100%', height: '100%' }}>
      {/* Your icon JSX */}
    </div>
  )
}
```

## Manifest Icon

If you have a `src/app/manifest.ts` or `public/manifest.json`, reference the icon:

```ts
// src/app/manifest.ts
export default function manifest() {
  return {
    icons: [
      { src: '/icon.png', sizes: '512x512', type: 'image/png' },
      { src: '/favicon.ico', sizes: '16x16 32x32', type: 'image/x-icon' },
    ],
  }
}
```

**Source:** daily/2026-05-13.md | 2026-05-13
