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.

Justus Deitert

Forma Favicon is a modern favicon generator built into your WordPress admin. Upload any image — PNG, JPEG, GIF, WebP, or SVG — and the plugin generates every favicon format and size your site needs, all from a single source.
What it generates:
<ul>
<li><code>favicon.ico</code> with 16×16, 32×32, and 48×48 embedded</li>
<li>Apple Touch Icon (180×180)</li>
<li>Android Chrome icons (192×192 and 512×512)</li>
<li><code>site.webmanifest</code> for PWA support</li>
<li><code>browserconfig.xml</code> for Windows tiles</li>
</ul>
Icon styling controls:
<ul>
<li>Adjustable padding (0–40%) to give your icon breathing room</li>
<li>Border radius (0–50%) for rounded or circular icons</li>
<li>Custom icon background color behind transparent images</li>
<li>Configurable theme color and background color for manifests</li>
</ul>
Live preview:
<ul>
<li>Browser-tab mockup shows exactly how your favicon will look</li>
<li>Light and dark mode toggle to preview against both backgrounds</li>
<li>Changes update in real time via client-side canvas rendering</li>
<li>“Unsaved” indicator when settings differ from the generated output</li>
</ul>
Smart features:
<ul>
<li>Detects and resolves conflicts with other favicon plugins</li>
<li>Automatically overrides the WordPress default Site Icon</li>
<li>SVG source images are rasterized client-side before upload</li>
<li>Clean admin page under Appearance → Favicon</li>
</ul>
<h3>Source Code</h3>
The full uncompressed source code (TypeScript/TSX, SCSS) and build configuration are available on GitHub: 
https://github.com/justusdeitert/forma-favicon
The <code>build/</code> directory is generated from <code>src/</code> using <code>@wordpress/scripts</code> with a custom webpack configuration.
To build from source:
<ol>
<li>Clone the repository: <code>git clone https://github.com/justusdeitert/forma-favicon.git</code></li>
<li>Install dependencies: <code>npm install</code></li>
<li>Run the build: <code>npm run build</code></li>
</ol>

Forma Favicon

Favicon generator — upload a source, customize styling, and generate all required favicon sizes including ICO, Apple Touch, and Android Chrome.

Dev Favicon Switcher vs Forma Favicon