---
title: Environment-Specific Favicons
description: Stop production mix-ups by assigning every environment its own favicon language, checklist included.
canonical: https://favicontools.com/blog/environment-specific-favicons
---

# Environment-Specific Favicons

A 16x16 square can prevent million-dollar incidents. Train your team to read the tab bar as a deployment safety net.

## Reduce production risk

Incident reports regularly cite “ran a script in the wrong tab” as the root cause. Visual cues create a pause before someone wipes production data.

With color-coded favicons, even a crowded browser window telegraphs which tab is safe to experiment in.

## Faster context switching

Designers, QA, and PMs juggle dozens of preview links. Window titles often look identical (same feature name).

Environment-specific favicons eliminate guesswork, especially when Slack reminders and Zoom calls pull people away mid-test.

## A visual language for every tier

Borrow colors from your design tokens, but keep the base glyph identical so brand recognition sticks.

| Environment | Icon treatment |
| --- | --- |
| Production | Gold-standard brand icon with zero overlays. Keep it sacred so customer-facing tabs are instantly recognizable. |
| Staging | Add a diagonal stripe or badge to indicate this is a safe sandbox for QA and demos. |
| Development | Use playful hues so developers can spot their local environment while alt-tabbing through logs. |
| Preview / Review Apps | Overlay the PR number or channel initial to ensure product and marketing click the right build. |

## Overlays have to survive the tab bar

- 16x16
- 32x32
- 48x48

Rendered at true pixel dimensions. The tab is where this system does its work, so test the badge at 16px before you agree on it: a stripe reads at that size, a PR number usually does not.

## Configuration blueprint

Bind icon references to the same deployment variables you already use for API URLs or feature flags.

| Layer | What to configure | Tip |
| --- | --- | --- |
| Next.js Metadata | Update metadata.icons using process.env.ICON_URL. | Centralize in app/layout.tsx so routes inherit the right icon set. |
| Manifest JSON | Serve an environment-specific manifest with matching PNGs. | Include purpose: "any maskable" for Android splash screens. |
| HTML fallbacks | Ensure legacy <link rel="shortcut icon"> tags also point to the right asset. | Add ?v={{ buildId }} query params to bust caches on deploy. |

## Rollout checklist

Ship the new system like any other compliance control: documented, peer reviewed, and automated.

1. **Name assets by environment** — Use environment suffixes (favicon-prod.png) plus cache-busting hashes.
2. **Inject the tags from env vars** — Inject the required indexing tags (rel="shortcut icon" and rel="apple-touch-icon") from environment variables in layout.tsx or document.tsx, using absolute https:// URLs when possible.
3. **Mirror it everywhere icons appear** — Mirror the updates for apple-touch icons and manifest.json icon arrays.
4. **Write the color system down** — Document the color system inside your design tokens so future rebrands stay consistent.
5. **Verify the deployed bytes** — Backstop everything with an automated verification step (Playwright or /verify) that inspects downloaded icon bytes.

## Implementation snippet

```tsx
// app/layout.tsx
const iconBase = process.env.NEXT_PUBLIC_ICON_BASE_URL;

export const metadata = {
  icons: {
    icon: [
      { url: `${iconBase}/favicon.ico` },
      { url: `${iconBase}/favicon.png`, sizes: "32x32" },
      { url: `${iconBase}/favicon-16x16.png`, sizes: "16x16" },
    ],
    shortcut: [`${iconBase}/favicon.ico?v=${process.env.NEXT_BUILD_ID}`],
  },
};
```

Coordinate with your platform team so iconBase resolves to S3 buckets, CDN paths, or GitHub Pages artifacts unique to each environment.