Why Different Favicons for Dev and Production Make Sense

How many times have you been debugging locally, made a change, refreshed the browser multiple times, and still not seen it — only to realize you're looking at the production site? It's a common developer trap. One simple fix is to give your development site a visually distinct favicon, so a quick glance at a browser tab instantly tells you where you are.

Got around to doing that thing where I change the favicon for local development. Get so confusing otherwise when you have both open, which is very common for me. pic.twitter.com/6Eu4MMfp5I

— Chris Coyier (@chriscoyier) March 17, 2020

There’s no elaborate setup involved – just keep a different favicon.ico for your local environment. On a WordPress site where only the wp-content folder is version-controlled, the favicon in the site root is separate. So you can manually swap the local root favicon, and it stays that way without being overwritten by deploys.

Creative Alternatives to Custom Favicons

  • Skip the local favicon entirely, leaving the browser’s default icon — which is visibly different from production.
  • Use an SVG favicon that dynamically displays the current Git branch name.
  • In Chrome, make use of the experimental tab groups feature to separate dev and production windows.
  • Use a browser extension to automatically add title prefixes, like DEV or the branch name.
  • Another browser extension can auto-colorize favicons based on matching URL patterns.

Rethinking Modern Favicon Requirements

Given the prevalence of high-resolution displays in 2020, the long list of favicon-related meta tags and generated image sizes may not be as important as we once thought. For a typical content website, the motivation for optimizing for "add to home screen" experiences or Windows tile colors is often low, since user demand for installing websites is niche.

More practical considerations:

  • Use a graphic of at least 32×32 to keep the icon crisp on high-DPI monitors.
  • Prefer SVG and CSS-based approach to handle dark mode accordingly.
  • Keep the favicon implementation lean to minimize code and file clutter.

Vision impairement is an open consideration for these visual cues — currently, most development favicon tricks rely purely on visual distinctions. A text-based presence in the tab might be a more accommodating solution.