Add a nextjs app router favicon in minutes

If you’ve ever opened a Next.js site built with the App Router and saw a generic browser tab icon, the missing favicon is probably the result of an incomplete metadata setup.

Prerequisites

• A Next.js 13+ project that uses the app directory.
• Node.js 18 or newer installed locally.
• An icon set (SVG, PNG, ICO) generated with Mzu favicondl. The favicon sizes guide can help you pick the right dimensions.

Step‑by‑step implementation

1. Generate the icon files. Use Mzu favicondl to create at least three files:
   • favicon.svg – the preferred scalable format.
   • favicon.ico – legacy fallback for browsers that still request /favicon.ico.
   • apple-touch-icon.png – optional Apple Touch icon.
   Save the files in the project’s public folder.
2. Export metadata in app/layout.tsx. The App Router reads a metadata export from layout files. Add an icons object that references the files you just placed.

   <pre><code>export const metadata = {
     title: 'My Next.js Site',
     icons: {
       icon: '/favicon.ico', // legacy fallback
       shortcut: '/favicon.ico', // shortcut icon for older browsers
       apple: '/apple-touch-icon.png', // Apple Touch icon (optional)
       other: [
         { rel: 'icon', url: '/favicon.svg', type: 'image/svg+xml', sizes: 'any' }
       ]
     }
   };
   </code></pre>

   This matches the official file‑based metadata approach documented by Next.js.
3. Verify the generated <head> output. Run npm run dev and open the page source. You should see link tags similar to:

   <link rel='icon' href='/favicon.ico'>
   <link rel='shortcut icon' href='/favicon.ico'>
   <link rel='apple-touch-icon' href='/apple-touch-icon.png'>
   <link rel='icon' href='/favicon.svg' type='image/svg+xml' sizes='any'>

   The tags are generated automatically; you do not need to write them manually.
4. Test in multiple browsers. Open the site in Chrome, Safari, and Firefox. Each should display the SVG icon on high‑DPI screens and fall back to the ICO file on older versions.
   • Chrome prefers SVG when type='image/svg+xml' is present.
   • Safari uses the Apple Touch icon for home‑screen shortcuts.
   • Firefox respects the rel='icon' entry and will cache the ICO file if the SVG is missing.
5. Deploy. Push the changes to your hosting provider (Vercel, Netlify, etc.). The public folder is served statically, so the icons are available immediately after the first build.

Common pitfalls

• Missing public folder path. If the icons live outside public, the generated URLs will point to a non‑existent location and browsers will log 404 errors.
• Using only rel='shortcut icon'. Modern browsers follow the rel='icon' specification (HTML spec). Relying solely on the legacy attribute can cause the SVG to be ignored.
• Cache‑related stale icons. Browsers aggressively cache favicon.ico. Append a query string (e.g., /favicon.ico?v=2) or enable content hashing in your build to force an update.
• Incorrect MIME type. Serve .svg with image/svg+xml and .ico with image/x-icon. A misconfigured server will cause browsers to reject the file.

Conclusion

By letting the App Router generate the <link> tags from a single metadata export, you keep the favicon configuration declarative and future‑proof. The steps above cover generation, placement, metadata export, verification, and deployment, so you can move from a blank tab icon to a polished brand presence in minutes.

Need a quick way to create the SVG and ICO files? Try Mzu favicondl – it produces the exact set of files required for the App Router approach.

Check the documented requirements

Next.js documents favicons and app icons in its metadata file conventions.