How to Set Up Multiple Favicons Different Pages (2026)

If you've ever kept 20 tabs open while debugging, you know the pain of finding the right one. GitHub solves this brilliantly: your main dashboard has the standard black cat icon, but jump into your notifications, and the favicon switches to a blue inbox. Google Workspace does the exact same thing—Docs is blue, Sheets is green, all running under the same domain.

That subtle visual cue is exactly why setting up multiple favicons different pages is a massive UX upgrade. It tells your users exactly where they are without forcing them to read truncated tab titles.

We usually think of the site icon as a global asset living in the root directory. But browsers don't actually care about your root directory. They care about the <link> tags in the document head. Let me show you exactly how to serve distinct icons per route, whether you are writing raw HTML or using a modern framework in 2026.

Why Bother With Route-Specific Icons?

You might be thinking: 'My brand has one logo. Why would I fragment it?'

Context is everything. When a user is browsing your public marketing site, they are evaluating your brand. Your standard logo works perfectly there. But once they log into your complex SaaS application, their context shifts from evaluation to productivity.

If they have your documentation open in one tab, your billing portal in another, and the main app in a third, a single logo forces them to read the tiny text on the tab to navigate. By utilizing multiple favicons different pages, you create a visual map. A subtle color shift—like changing your logo's background from white to dark blue for the admin panel—instantly reduces cognitive load.

How to Serve Multiple Favicons Different Pages

Step 1: Organize Your Asset Folders

Before touching any code, stop dumping everything into your public root. If you have a marketing site and an admin dashboard, you need two distinct icon sets. I recommend generating your sets using Mzu favicondl and placing them in dedicated subdirectories.

/public
  /icons
    /marketing
      favicon.ico
      icon.svg
      apple-touch-icon.png
    /dashboard
      favicon.ico
      icon.svg
      apple-touch-icon.png

This keeps your paths clean and prevents accidental overwrites when you update your branding.

Step 2: The Static HTML Approach

If you are building a static site or using a traditional templating engine (like Blade or Jinja), you simply swap the paths in your layout files. The browser parses the HTML top-down and requests whatever is specified in the href attribute.

For your marketing pages, your <head> should look like this:

<link rel='icon' href='/icons/marketing/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/icons/marketing/apple-touch-icon.png'>

For your dashboard pages, you render a different layout block:

<link rel='icon' href='/icons/dashboard/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/icons/dashboard/apple-touch-icon.png'>

If you need a refresher on the exact tags required this year, check out our favicon HTML code cheat sheet.

Step 3: The Next.js App Router Approach

Modern frameworks make this incredibly elegant. In Next.js (App Router), metadata is scoped to the route segment. You don't need to write custom document heads or inject tags manually.

Instead of relying on a global favicon.ico file, you export a metadata object in your specific page.tsx or layout.tsx file.

// app/dashboard/layout.tsx
export const metadata = {
  title: 'Admin Dashboard',
  icons: {
    icon: '/icons/dashboard/icon.svg',
    apple: '/icons/dashboard/apple-touch-icon.png',
  },
};

Next.js automatically injects these specific tags for any route under /dashboard, overriding the global icons defined in your root layout. This is the cleanest way to handle multiple favicons different pages in a React application.

Common Pitfalls to Avoid

• The Aggressive Browser Cache: You deploy your new page-specific icons, but Chrome stubbornly shows the old global logo. Browsers cache favicons aggressively. To fix this during development, append a query string to your icon paths (e.g., href='/icons/dashboard/icon.svg?v=2'). If you're still stuck, read our guide on how to force a favicon cache clear.
• The Web App Manifest Conflict: Your site.webmanifest file defines the icon used when a user installs your site as a Progressive Web App (PWA). Unlike HTML tags, the manifest is typically global. If a user installs your dashboard, Android might still use the marketing icon defined in the root manifest. Serve a dynamic manifest based on the route, or use a distinct <link rel='manifest' href='/dashboard.webmanifest'> tag for your app section.
• Overcomplicating with JavaScript: I see developers writing complex React useEffect hooks to manipulate the DOM and swap icons on route changes. Don't do this unless you are building real-time notification badges. For static route-based icons, rely on your framework's native metadata API or server-rendered HTML. It is faster, more reliable, and doesn't cause visual flickering when the page loads.

Setting up distinct icons per page takes about ten minutes of configuration, but it saves your users hours of tab-hunting frustration over the lifetime of your app. Generate your specific icon sets with Mzu favicondl, organize your folders, and let your HTML do the heavy lifting.