karasunouta

Dev Favicon Switcher helps you easily distinguish between your production and development environments. It automatically displays a different favicon based on the current URL, avoiding mistakes where you might accidentally edit the live site thinking it’s the development environment.
Key Features:
<ul>
<li>Automatic Environment Detection: Automatically applies the development favicon on common local domains (<code>.local</code>, <code>.test</code>, <code>.dev</code>).</li>
<li>Custom Development URLs: Specify exact URLs where the development favicon should appear (supports multiple URLs).</li>
<li>Easy Icon Management: Upload your own dev favicon using the WordPress media uploader, complete with built-in image cropping.</li>
<li>Restore Default Icon: Don’t have an icon handy? Easily apply our unified default development favicon with a single click.</li>
<li>Automatic Size Generation: Automatically generates all standard WordPress site icon sizes (32×32, 180×180, 192×192, 270×270) to ensure compatibility across all devices and browsers.</li>
<li>Admin Bar Styling: Customize the admin bar’s background and text colors to clearly identify your development environment at a glance, with a live preview and easy reset options.</li>
<li>No Frontend Bloat: Everything works efficiently via standard WordPress filters without adding unnecessary frontend scripts.</li>
</ul>
Perfect for developers working with local environments, staging servers, and migration tools like All-in-One WP Migration.
For a detailed setup and usage guide, please check out our <a href="https://karasunouta.com/en/wp-plugins/dev-favicon-switcher/" rel="nofollow ugc">detailed guide</a>.
Development Source: 
This plugin is developed using npm and webpack. You can find the human-readable source code and build tools in our <a href="https://github.com/karasunouta/dev-favicon-switcher" rel="nofollow ugc">public repository</a>.

Dev Favicon Switcher

Automatically switches your favicon (site icon) between production and development environments to prevent confusion.

Web Guy

<a href="https://github.com/webguyio/support" rel="nofollow ugc">💬 Ask Question</a> | <a href="mailto:webguywork@gmail.com" rel="nofollow ugc">📧 Email Me</a>
Add a favicon.
Set the favicon URL under Appearance > Customize > Site Identity > Site Favicon.
This plugin is especially useful if you’d like to set a Site Icon, but also need to set a unique favicon separate from it.

Dev Favicon Switcher vs Site Favicon