Favicon for Next.js

Adding Favicon to Next.js App Router

Next.js 14+ with the App Router provides multiple ways to configure favicons. The simplest method is to place your favicon files directly in the app/ directory.

Method 1: File-Based (Simplest)

Place these files in your app/ directory:

app/
├── favicon.ico          # Auto-served at /favicon.ico
├── icon.png             # Alternative PNG icon
├── apple-icon.png       # Apple Touch Icon
└── manifest.webmanifest # Web App Manifest

Next.js automatically detects these files and generates the appropriate <link> tags.

Method 2: Metadata API (More Control)

For more control over icon configuration, use the Metadata API in your layout.tsx:

// app/layout.tsx
import type { Metadata } from 'next';

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

Method 3: Dynamic Icons

Next.js also supports generating icons dynamically using the icon.tsx convention:

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

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

export default function Icon() {
  return new ImageResponse(
    (
      <div style={{
        fontSize: 24,
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'linear-gradient(135deg, #8b5cf6, #6366f1)',
        borderRadius: 6,
        color: 'white',
      }}>
        F
      </div>
    ),
    { ...size }
  );
}

Step-by-Step: Generate & Deploy

• Step 1: Create your logo in SVG format using Figma, Illustrator, or any vector editor
• Step 2: Use our faviconverter to generate all favicon sizes
• Step 3: Download the full favicon package (ZIP)
• Step 4: Extract and copy all files to your public/ directory
• Step 5: Add the metadata configuration to your layout.tsx
• Step 6: Deploy to Vercel — favicons are automatically served from the CDN

Favicon on Vercel Deployment

When deploying to Vercel, your favicon files in the public/ directory are automatically served from Vercel's global CDN. No additional configuration is needed. The files are cached aggressively for optimal performance.

If you update your favicon, Vercel will automatically invalidate the CDN cache on your next deployment. However, browsers may cache the old favicon — users might need to clear their cache to see the new icon.

Common Issues

• Favicon not showing: Clear browser cache, check file path, verify public/ directory
• Wrong size displayed: Ensure you have the right sizes defined in metadata
• Dark background issue: Design your favicon with transparency and test on both light and dark tabs
• Manifest errors: Verify your site.webmanifest JSON is valid

Generate Your Next.js Favicon

Ready to create a perfect favicon for your Next.js app? Use our free faviconverter to generate all the files you need in seconds.