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](https://aamax.co/service/nextjs-web-development)**?"** 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 ``.
### **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 ``**
In the Pages Router, you **must reference your favicon manually**.
Add the following inside `pages/_document.js`:
``` jsx
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
);
}
```
### **Using multiple favicons for better compatibility**
``` jsx
```
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 `` Metadata
Next.js App Router uses metadata configuration that can also set
favicons:
### **Example using metadata object**
In `layout.js`:
``` jsx
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:
``` jsx
```
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 ``
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](https://aamax.co)** for robust and scalable
solutions.
Grow Your Reach
Want to publish a guest post on aamax.co?
Place an order for a guest post or link insertion today.
Place an Order