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

Best Risk Advisory Guest Posting Sites

Best Risk Advisory Guest Posting Sites

Risk advisory guest posting is no longer optional for firms aiming to build authority, trust, and visibility. By publishing on relevant, high-quality ...

Best Supply Chain Guest Posting Sites

Best Supply Chain Guest Posting Sites

For businesses seeking a streamlined and results-driven approach, partnering with an experienced digital marketing agency can make all the difference....

Best Incubators Guest Posting Sites

Best Incubators Guest Posting Sites

Use the curated list above to start your outreach, follow best practices, and partner with experts when needed to scale faster. With the right strateg...

Best Accounting Guest Posting Sites

Best Accounting Guest Posting Sites

Guest posting is essential for accounting firms seeking authority, credibility, and visibility. By targeting relevant, high-quality platforms and prod...

Best Outsourcing Guest Posting Sites

Best Outsourcing Guest Posting Sites

For businesses seeking consistent, high-quality results, partnering with an experienced digital marketing agency can make all the difference.

Best Payroll Guest Posting Sites

Best Payroll Guest Posting Sites

Use the curated payroll guest posting sites listed above, follow best practices, and partner with experienced professionals to scale faster. When exec...

Need Help? Chat with Our AI Support Bot