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.