Sign up
  • UK, USA, AU, PK
  • +92-308-4281241
  • info@aamax.co

Where To Put Favicon in Next JS

Where To Put Favicon in Next JS

Where To Put Favicon in Next JS

Favicons may seem like a small element in the grand scope of web development, but they play a significant role in branding, user experience, and professionalism. Whether you're building a personal website or a large-scale enterprise application, ensuring your favicon is correctly placed and displayed is essential. For Next.js developers, especially newcomers, the question "Where do I put the favicon in Next.js?" arises often due to differences between various Next.js versions and project structures.

This extensive guide explains exactly where favicons go in Next.js, how to configure them in different versions of the framework, how to support multiple file types, and common mistakes to avoid. This article is tailored for AAMAX's blog readers---developers, business owners, and organizations seeking clarity as they build modern web applications. And if you want to outsource reliable React or MERN Stack development, you can always hire AAMAX for expert-level development services. AAMAX is a full-service digital marketing and development company offering Web Development, SEO, and Digital Marketing services.

Let's dive in.

Understanding What a Favicon Is

A favicon (short for "favorite icon") is the small icon displayed in:

  • Browser tabs\
  • Bookmarks\
  • Mobile device home screens (when a site is added)\
  • Progressive Web App (PWA) manifests\
  • Search results in some cases\
  • Browser history

Favicons help users identify your website quickly and reinforce brand recognition. They are typically 16×16 or 32×32 pixels, but modern usage includes larger sizes for retina displays and mobile devices.

Common favicon file formats include:

  • .ico
  • .png
  • .svg
  • .jpg
  • Apple Touch Icons (.png at larger sizes)

Next.js handles favicons slightly differently depending on whether you're using the Pages Router (/pages) or the App Router (/app). Both are common today, so we'll cover each in detail.

Where To Put Favicon in Next.js (App Router)

If you are using Next.js 13+ with the App Router (/app directory), favicon placement is very straightforward.

Where to place the favicon

You simply place your favicon file inside the /app directory, and Next.js automatically configures it.

Example structure:

app/
 ├─ favicon.ico
 ├─ layout.js
 ├─ page.js
 └─ globals.css

Supported filenames in App Router

Next.js automatically recognizes these filenames:

  • favicon.ico
  • favicon.png
  • icon.ico
  • icon.png
  • apple-touch-icon.png
  • manifest.json

These will automatically be served from the root /.

Why this works

Next.js App Router uses a built-in file conventions system, so any of the above files inside /app are automatically mapped to:

https://yourwebsite.com/favicon.ico

No need to manually import or include them inside <head>.

Example: App Router favicon setup

Place this file in:

/app/favicon.ico

And that's it.

Adding multiple icons (optional)

If you want additional icons:

app/
 ├─ favicon.ico
 ├─ icon.png
 ├─ apple-touch-icon.png
 ├─ manifest.json
 └─ ...

These will be automatically detected.

Where To Put Favicon in Next.js (Pages Router)

If you are using the Pages Router (/pages), which was the default before Next.js 13, favicon setup is slightly different.

Where to place the favicon

Place your favicon inside the /public folder:

public/
 ├─ favicon.ico
 ├─ favicon.png
 ├─ apple-touch-icon.png
 ├─ site.webmanifest
pages/
 ├─ _app.js
 ├─ _document.js
 └─ index.js

The public/ directory is always served from root in Next.js.
So a file in /public/favicon.ico becomes:

https://yourwebsite.com/favicon.ico

Adding favicon manually inside <Head>

In the Pages Router, you must reference your favicon manually.

Add the following inside pages/_document.js:

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Using multiple favicons for better compatibility

<Head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</Head>

This ensures compatibility across browsers and devices.

Next.js Favicon for Static Exports

For Next.js export mode (next export), the setup is the same as Pages Router:

  • Place favicons inside /public
  • Reference them manually in _document.js

Next.js does not auto-inject icons during static exports.

Next.js Favicon in App Router + Custom <head> Metadata

Next.js App Router uses metadata configuration that can also set favicons:

Example using metadata object

In layout.js:

export const metadata = {
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon.ico",
    apple: "/apple-touch-icon.png",
  },
};

This is useful when you want full control or custom paths.

Using SVG Favicons in Next.js

SVG favicons offer scalability and lightweight footprint.

App Router SVG favicon

Just add:

app/icon.svg

Next.js automatically serves it as /icon.svg.

Pages Router SVG favicon

Place in /public and reference manually:

<link rel="icon" type="image/svg+xml" href="/icon.svg" />

However, note:

  • Safari may have limited SVG favicon support.
  • Many developers still use .ico or .png for universal compatibility.

Making Sure Favicons Display Correctly in Production

Sometimes favicons work in development but not in production.

Common causes:

  1. Cached favicon in browser
  2. Wrong file path
  3. Missing size attributes
  4. Favicon placed inside /src instead of /public
  5. CDN caching on Vercel or Netlify

How to fix caching

Try hard refresh:

Windows: Ctrl + Shift + R
Mac: Cmd + Shift + R

Or manually clear browser cache for your domain.

Favicon File Recommendations for Next.js

To ensure compatibility across all browsers, include:

File Type Recommended? Purpose

favicon.ico ✓ Required Browsers and legacy support favicon.png ✓ High-quality tab icon apple-touch-icon.png ✓ iOS home screen icon icon.svg Optional Scalable vector favicon manifest.json Optional PWA support

The best minimal setup for most Next.js projects:

favicon.ico
apple-touch-icon.png

Should You Use a Favicon Generator?

If you want a professional multi-size favicon pack, tools like:

  • RealFaviconGenerator.net\
  • Favicon.io\
  • Brandfolder Favicon Generator

These tools produce:

  • Multiple resolutions
  • iOS icons
  • Android icons
  • Web manifest file
  • Fallback PNG versions

Next.js supports all of them.

Troubleshooting Common Favicon Issues in Next.js

1. Favicon Not Updating After Deployment

Usually caused by browser caching.
Change the filename:

favicon-v2.ico

Update your Head link accordingly.

2. Favicon Not Displaying on Safari

Use:

apple-touch-icon.png

Safari sometimes ignores .ico and .svg.

3. Dynamic routes not showing favicon

This is usually due to missing _document.js configuration.

4. Favicon showing broken in development

Make sure your file is inside:

  • /app root folder (App Router)
  • /public folder (Pages Router)

Where Favicons Should Not Be Placed in Next.js

Avoid placing favicons inside:

  • /src/assets
  • /src/images
  • /components
  • /styles
  • /static (deprecated)
  • Any nested folder inside pages/app unless configured in metadata

Favicons must be in:

  • /app (App Router)
  • /public (Pages Router)

These are the only two correct locations.

Why Placing Favicons Correctly Matters

Developers often overlook favicon placement, but it affects:

Brand Visibility

Your icon appears in tabs, bookmarks, and browser UI.

Professional Appearance

A missing favicon looks unpolished, especially for businesses.

SEO & Credibility

Google displays favicons in mobile search results.

User Trust

A proper favicon helps visitors recognize your site instantly.

When Using Next.js for Business Projects

Many businesses rely on Next.js for high-performance React applications. Ensuring correct favicon placement is part of maintaining:

  • Brand consistency\
  • Smooth user experience\
  • Clean UI\
  • SEO best practices

For companies building enterprise-level web systems, working with an expert development partner is essential.

Why Hire AAMAX for Next.js or MERN Development?

AAMAX is a full-service digital company offering:

  • Web Development
  • MERN Stack Development
  • SEO Services
  • Digital Marketing

With specialized expertise in React, Next.js, Node.js, and MongoDB, AAMAX builds scalable, modern, and fast applications for businesses of all sizes. Whether you're creating a corporate website, SaaS platform, eCommerce store, or enterprise portal, AAMAX ensures your project is built professionally and aligned with industry best practices.

If you need reliable developers who understand the full Next.js ecosystem, complex routing handling, performance optimization, UI/UX refinement, and deployment workflows---AAMAX is the ideal partner.

Final Thoughts

Knowing where to put the favicon in Next.js is essential because the file structure varies based on which routing system you use:

App Router (Next.js 13+)

  • Put favicon files directly inside /app
  • Everything is auto-detected

Pages Router

  • Put favicon files inside /public
  • Manually link them inside <Head>

Favicons may be small, but they contribute significantly to branding and user experience. Whether you're building a simple portfolio or a full-scale business application, correct favicon placement is part of delivering a polished, professional final product.

If your project needs expert-level MERN Stack or Next.js development, remember you can always rely on AAMAX for robust and scalable solutions.

Want to publish a guest post on aamax.co?
Click here to place an order for a guest post or link insertion.

Related Blogs

What Is Redux in React JS

What Is Redux in React JS

Redux is more than just a state‑management library — it is an architectural pattern that brings predictability, consistency, and scalability to your a...

Why React JS Is Popular

Why React JS Is Popular

React JS continues to dominate the modern web development landscape---and for good reason. Its combination of speed, flexibility, scalability, ease of...

Why Use Next JS

Why Use Next JS

Whether you are building a simple landing page or a large-scale digital platform, Next.js gives you the flexibility, speed, and performance needed in ...

Who Built Next JS

Who Built Next JS

Next.js is one of the most influential and widely adopted JavaScript frameworks for building modern web applications. It powers thousands of productio...

Where To Put Favicon in Next JS

Where To Put Favicon in Next JS

Favicons may be small, but they contribute significantly to branding and user experience. Whether you’re building a simple portfolio or a full-scale b...

Where To Learn Next JS

Where To Learn Next JS

Start learning today, stay consistent, and build real-world projects. Next.js is a skill that can significantly accelerate your development career and...

Need Help? Chat with Our AI Support Bot