Give Your Development Domain a Different Favicon Than Production

The Problem: Tab Blindness in Development

When working on web projects, it's frustrating to have multiple browser tabs open and not knowing which one is your development environment versus production. A simple visual cue--a different favicon for development--solves this problem instantly.

Modern web development involves juggling multiple environments--local development, staging, preview deployments, and production. When you have several tabs open in your browser, each showing a similar-looking website, it's easy to lose track of which environment you're currently viewing. This can lead to embarrassing mistakes: posting test content to a live site, making irreversible changes to production data, or wasting time debugging issues that only exist in your development environment.

The solution is elegantly simple: give your development domain a distinct favicon that immediately identifies it as non-production. This visual differentiator takes seconds to implement and provides permanent protection against costly mistakes. Our /services/web-development/ expertise helps teams avoid these common pitfalls through proper environment configuration and development workflow optimization.

Solution: Environment-Aware Favicon Configuration

Using favicons-webpack-plugin

The most robust approach to environment-specific favicons uses the favicons-webpack-plugin, which integrates seamlessly with webpack and supports different configuration modes for development versus production builds. This plugin can generate favicons automatically from a source image and inject the appropriate HTML tags into your pages. For teams working with modern build tools, proper webpack configuration is essential for maintaining consistent development workflows.

When the webpack mode is set to production, the plugin generates a full webapp favicon set with all required sizes and formats. During development, you can configure it to use a simpler, faster approach with a distinct visual design that clearly indicates the development environment.

Configuration Pattern

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
 plugins: [
 new HtmlWebpackPlugin({
 template: './src/index.html',
 favicon: isProduction
 ? './src/assets/favicon-prod.ico'
 : './src/assets/favicon-dev.ico'
 }),
 new FaviconsWebpackPlugin({
 logo: './src/assets/logo.png',
 mode: isProduction ? 'webapp' : 'light',
 favicons: {
 icons: isProduction ? 'all' : 'minimal'
 }
 })
 ]
};

This configuration demonstrates a key principle: using environment variables to conditionally select different favicon sources.

TypeScript Configuration Pattern

For projects using TypeScript configuration files, you can add type safety to your webpack configuration:

// webpack.config.ts
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import FaviconsWebpackPlugin from 'favicons-webpack-plugin';

type WebpackEnvironment = 'development' | 'production' | 'staging';

function getFaviconPath(env: WebpackEnvironment): string {
 switch (env) {
 case 'development':
 return './src/assets/favicon-dev.svg';
 case 'staging':
 return './src/assets/favicon-staging.svg';
 case 'production':
 return './src/assets/favicon-prod.svg';
 default:
 return './src/assets/favicon-dev.svg';
 }
}

const config: webpack.Configuration = {
 mode: process.env.NODE_ENV as WebpackEnvironment,
 plugins: [
 new HtmlWebpackPlugin({
 template: './src/index.html',
 favicon: getFaviconPath(process.env.NODE_ENV as WebpackEnvironment)
 })
 ]
};

The TypeScript approach provides compile-time checking and makes your configuration more maintainable. Teams implementing TypeScript in webpack configs benefit from better IDE support and fewer runtime errors.

Modern Favicon Best Practices

Minimal File Set for 2025

The landscape of favicon requirements has simplified significantly. Modern browsers are more capable of handling different formats, and the number of required files has decreased. The current recommendation is a minimal set of three files:

• SVG favicon - For modern browsers with perfect scaling
• 32x32 PNG - Universal fallback for all browsers
• apple-touch-icon - For iOS devices and home screen icons

SVG favicons offer significant advantages over traditional formats. They scale perfectly to any size without pixelation, have smaller file sizes, and can be styled with CSS.

File Structure Organization

src/
 assets/
 favicons/
 base.svg # Base design template
 dev.svg # Development variant
 staging.svg # Staging variant
 prod.svg # Production variant

Using a base SVG with color or text variations allows you to maintain a consistent visual identity while clearly differentiating environments. A common pattern is to use a distinct color for each environment. This approach aligns with modern frontend performance optimization by reducing file sizes and improving loading efficiency.

Troubleshooting Common Issues

Favicon Not Appearing

When a favicon doesn't appear, check these common causes:

1. Incorrect file path - Verify the favicon file exists at the specified path
2. Caching - Hard-refresh the browser or clear the cache
3. HTML tag injection - Inspect the generated HTML to confirm <link> tags were injected

Build Errors with Environment Variables

If using environment variables causes errors, verify they are passed correctly to webpack. Using dotenv for local development resolves most issues.

TypeScript Configuration Type Errors

Ensure you have the @types/webpack package installed for type definitions. This catches configuration errors during development. Our webpack configuration guides cover common pitfalls and their solutions.

Sources

1. CSS-Tricks: Give Your Development Domain a Different Favicon Than Production
2. favicons-webpack-plugin GitHub Repository
3. HtmlWebpackPlugin Documentation
4. Evil Martians: How to Favicon in 2025