Favicon & Logo Setup

Learn how to configure favicons, app icons, and logos in your Next.js application.

Basic Favicon

Place your favicon in the app directory. Next.js 13+ automatically handles favicon detection:

public/
├── favicon.ico    # Classic favicon - 32x32 pixels
├── page.tsx
└── layout.tsx

Advanced Icon Configuration

For comprehensive icon support, include these files in your app directory:

public/
├── favicon.ico       # Classic favicon (32x32)
├── icon.png         # App icon (180x180)
├── icon.svg         # Vector icon
├── apple-icon.png   # Apple touch icon (180x180)
└── opengraph-image.png  # Social media preview (1200x630)

You can also generate icons dynamically using route segments:

// app/icon.tsx
import { ImageResponse } from 'next/server'
 
// Route segment config
export const runtime = 'edge'
 
// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'
 
// Image generation
export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    {
      ...size,
    }
  )
}

Metadata Configuration

Configure icons through the metadata object in your layout.tsx:

// app/layout.tsx
export const metadata = {
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
}

Best Practices

Use SVG or PNG format for best quality
Provide multiple sizes for different devices
Include a fallback ICO file
Optimize images for web use
Test icons across different browsers and devices

Recommended Sizes

Icon Type	Size	Purpose
favicon.ico	32x32	Classic browser favicon
icon.png	180x180	Modern browsers
apple-icon.png	180x180	iOS devices
opengraph-image.png	1200x630	Social media previews