How to Add a Favicon to Your Next.js App

Next.js Favicon Implementation

Next.js makes it easy to add favicons to your application. The framework automatically handles favicon files placed in the public directory or the app directory (for App Router).

Use our free favicon generator to convert your logo to favicon, then follow the steps below to add it to your Next.js app.

Method 1: Using the App Router (Next.js 13+)

If you're using the App Router, you can add favicon files directly to your app directory:

1. Generate your favicon files using our logo to favicon tool
2. Place favicon.ico in your app directory
3. For additional sizes, create an icon.png or icon.svg file in the app directory
4. Next.js will automatically detect and use these files

Next.js supports icon.ico, icon.png, icon.svg, and apple-icon.png files in the app directory.

Method 2: Using the Public Directory

For more control or when using the Pages Router, place favicon files in the public directory:

1. Generate all favicon sizes using our favicon generator
2. Extract the ZIP file and copy all favicon files to your public directory
3. Update your app/layout.tsx or pages/_document.tsx to include favicon links

// app/layout.tsx (App Router)
export const metadata = {
  icons: {
    icon: [
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
    ],
    apple: [
      { url: '/favicon-196x196.png', sizes: '196x196', type: 'image/png' },
    ],
  },
}

Next.js Favicon Sizes

For optimal Next.js favicon support, include these sizes:

• 16x16: Browser tabs (most common)
• 32x32: Browser bookmarks
• 96x96: Android home screen
• 196x196: Apple touch icon
• 512x512: High-resolution displays and PWAs

Our Next.js favicon generator creates all these sizes automatically.

Adding Manifest.json for PWA Support

For Progressive Web App support in Next.js, add a manifest.json file to your public directory:

{
  "name": "Your Next.js App",
  "short_name": "App",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone"
}

Our favicon generator includes a ready-to-use manifest.json file with all icon references.

Best Practices for Next.js Favicons

• Use SVG favicons for modern browsers (Next.js supports icon.svg in the app directory)
• Provide multiple sizes for different devices and contexts
• Test your favicon in both light and dark browser themes
• Ensure your favicon works at small sizes (16x16 pixels)
• Use our free favicon generator to create all required sizes at once