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.

Josh Hunt

Huntsman Dark Mode Site Icon allows you to set a separate site icon for light and dark mode.
Upload one icon for light mode using WordPress’s built-in Site Icon, and upload a separate icon for dark mode using this plugin. The appropriate icon is then displayed automatically based on the visitor’s system theme.
No code or configuration is required. If no dark mode icon is set, WordPress behaves exactly as normal.
<h3>Key Features</h3>
<ul>
<li>Separate site icons for light mode and dark mode</li>
<li>Simple upload interface in the WordPress admin</li>
<li>Works on the frontend, admin area, and login screen</li>
<li>Optional enable/disable toggle</li>
<li>Does not replace or override the core WordPress Site Icon</li>
<li>Accessable via the WP API</li>
</ul>
<h3>Usage</h3>
<ul>
<li>
Site Icon (WordPress) 
This is the default WordPress Site Icon and is still managed by WordPress.
</li>
<li>
Dark Mode Site Icon 
This icon is only used when the user’s system is in dark mode and the browser supports <code>prefers-color-scheme</code>.
</li>
</ul>
If the Dark Mode Site Icon is not set, the plugin does nothing and WordPress behaves normally.
<h3>REST API</h3>
The plugin exposes a public REST endpoint for accessing the Dark Mode Site Icon:
<pre><code>/wp-json/hdmsi/v1/icons
</code></pre>
Example response: 
{ 
“enabled”: true, 
“dark”: { 
“id”: 123, 
“url”: “https://example.com/icon-dark.png” 
} 
} 
A dark-mode Web App Manifest is also available at:
<pre><code>/wp-json/hdmsi/v1/manifest?mode=dark
</code></pre>

Huntsman Dark Mode Site Icon

Set separate site icons for light and dark mode based on the visitor’s system theme.

Dev Favicon Switcher vs Huntsman Dark Mode Site Icon