How to Add Favicon in Next.js 15?

You've just finished building your sleek Next.js application, but when you look at the browser tab, you're still seeing that default blank favicon. Or maybe you've tried adding a custom favicon, but it's not showing up consistently across different deployments. If this sounds familiar, you're not alone.

Many developers struggle with favicon implementation in Next.js, especially when deploying to platforms like Vercel. As one developer shared on Reddit, "I'm trying to figure out how favicons work with Next.js/Vercel... it only worked on one deployment but not the others."

The good news? Adding a favicon in Next.js 15 is actually straightforward once you understand the proper approach. This guide will walk you through the process step-by-step, helping you avoid common pitfalls and ensure your favicon displays consistently across all deployments.

Why Favicons Matter

Before diving into the implementation, let's understand why favicons are crucial for your web application:

• Brand Recognition: Your favicon serves as a mini-logo, making your site instantly recognizable among dozens of open tabs

• Professional Polish: A missing or default favicon can make your site appear unfinished or unprofessional

• Mobile Experience: Favicons appear as icons when users save your web app to their mobile home screens

• User Navigation: They help users quickly locate your site in their bookmarks and browser history

The Simple Solution: Automatic Favicon Detection

Next.js 15 has simplified favicon implementation with automatic detection. According to the official Next.js documentation, you don't need complex configuration or manual link tags anymore.

Here's the basic approach:

1. Place your favicon.ico file in one of two locations:

   ├── app/
   │   └── favicon.ico   # Option 1: In the app directory
   └── public/
       └── favicon.ico   # Option 2: In the public directory
   

2. Next.js will automatically detect and add the appropriate HTML tags to your application's head section.

Step-by-Step Implementation Guide

1. Prepare Your Favicon File

Before placing your favicon, ensure it meets these requirements:

• Use the .ico format for maximum compatibility

• Include multiple sizes in your ICO file (16x16, 32x32, and 48x48 pixels are common)

• Keep the file size small (under 100KB) for optimal performance

2. Choose the Right Location

You have two options for placing your favicon:

your-nextjs-project/
├── app/
│   └── favicon.ico

This is the preferred method in Next.js 15 as it follows the new app directory convention.

your-nextjs-project/
└── public/
    └── favicon.ico

This method works with both the pages and app router.

3. Additional Icon Types

For comprehensive device support, you can also add:

your-nextjs-project/
├── app/
│   ├── favicon.ico
│   ├── icon.png        # For modern browsers
│   └── apple-icon.png  # For iOS devices

4. Configure Metadata (Optional)

While Next.js automatically handles basic favicon implementation, you can add custom configurations in your layout.tsx:

export const metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/icon.png', type: 'image/png' },
    ],
    apple: [
      { url: '/apple-icon.png' },
    ],
  }
}

Troubleshooting Common Issues

1. Favicon Not Updating on Vercel

This is a common issue reported by many developers. To fix it:

1. Open your terminal

2. Run these commands:

   vercel --force
   vercel --prod
   

3. Clear your browser cache or perform a hard refresh (Ctrl + F5 on Windows, Command + R on Mac)

2. Favicon Not Showing in Development

If your favicon isn't visible during local development:

1. Check the file name is exactly favicon.ico

2. Verify the file location (either in app/ or public/)

3. Restart your development server

4. Clear your browser cache

3. Multiple Favicons Showing Inconsistently

Some developers report different favicons showing across deployments. To ensure consistency:

1. Remove any duplicate favicon files from your project

2. Delete old favicon references in your layout.tsx or _app.js

3. Let Next.js handle the favicon automatically

4. Force a new deployment on Vercel

Best Practices

1. Keep It Simple: Let Next.js handle the favicon automatically when possible

2. Use Multiple Formats: Include both .ico and .png versions for better device support

3. Optimize File Size: Compress your favicon files to improve loading times

4. Test Across Devices: Verify your favicon appears correctly on different browsers and devices

5. Version Control: Include your favicon files in your git repository

Conclusion

Adding a favicon in Next.js 15 is straightforward when you follow the framework's conventions. By placing your favicon file in the correct location and letting Next.js handle the implementation, you can avoid many common issues that developers face.

Remember to clear your cache and force deploy when updating favicons on Vercel, and consider including multiple icon formats for comprehensive device support. With these tips and best practices, you can ensure your application's favicon displays consistently across all platforms and deployments.

For more detailed information, refer to the official Next.js documentation on app icons and stay updated with the latest changes in the framework.