How to Change the WordPress Admin Favicon

The short answer

WordPress uses one image, called the Site Icon, as the favicon for the public site, the admin dashboard and the login screen. To change the dashboard favicon, replace the Site Icon. If you want the admin area to show a different icon from the public site, for example a distinct badge so you can spot the dashboard tab among many open tabs, you need a small piece of custom code that swaps the icon only on admin and login pages.

A favicon is the small image a browser shows in the tab, bookmarks and history next to a page title. It is usually rendered far smaller than any other logo use. Artwork that works there is normally a simplified mark taken from the full logo, not the complete lockup. A lockup is the fixed arrangement of symbol and wordmark.

Before you start

• Administrator access to the WordPress site, since only users who can manage site options can change the Site Icon.
• Confirmation that you have the right to use the logo. A file being an SVG, EPS or AI file does not prove that it contains clean vector paths, that it is editable, or that you are permitted to reuse it.
• The source logo in an editable vector format, opened in a vector editor such as Illustrator, Affinity Designer or Inkscape.
• For the custom-code route only: the ability to add a small plugin or edit a child theme, plus a recent backup or a staging copy of the site.

Step 1: Prepare the favicon artwork from your vector logo

The WordPress upload screen asks for a square image and states a minimum pixel size, which in current versions is 512 by 512 pixels. Check the text on your own Site Icon screen, because this guidance can change between releases. The minimum size and the square shape are WordPress requirements. The legibility advice below is design guidance.

• Create a square artboard. Place only the symbol or a single-letter monogram on it, not the full wordmark. Long text becomes an unreadable smudge at tab size.
• Leave a small, even margin around the mark so it does not touch the edges. Browsers and operating systems may crop or round the corners.
• Convert any live type to outlines. Outlining turns text into vector shapes, so the result no longer depends on the font being installed. Keep an unoutlined copy so you can edit it later.
• Expand strokes into filled shapes, or check that stroke weights stay consistent when you scale. Thin strokes often disappear when the image is reduced.
• Simplify the paths. Merge overlapping shapes with a union or pathfinder operation, remove stray anchor points, and close any open paths so fills render predictably.
• Remove fine detail, gradients and small counters if they fill in at small sizes. A counter is the enclosed space inside letters such as o or e.
• Preview the artboard at very small zoom levels, or export a test file and view it reduced. Judge legibility at the size a tab actually displays.

Planning for light and dark browser themes

Browser tabs can be light or dark depending on the user's system and browser settings. A dark mark on a transparent background can vanish on a dark tab, and a light mark can vanish on a light one. The Site Icon accepts one image, so the most dependable approach is a mark that reads on both. You can achieve this in three ways: place it on a solid background tile in the brand colour, add a contrasting outline, or choose a mid-tone colour that contrasts with both light and dark tabs. Test the exported file against both a light and a dark background before uploading.

An SVG favicon can include an internal style rule using the prefers-color-scheme media query, so the mark switches colour when the user's system is in dark mode. WordPress's built-in Site Icon setting does not use this technique, and the media library blocks SVG uploads by default. It is only available through the custom-code route, and browser support for SVG favicons and colour-scheme switching varies. If you use it, keep a PNG fallback. The supplied material contains no current support data, so test in the browsers your team actually uses.

Export settings

• Format: PNG, which the Site Icon uploader accepts and which supports transparency.
• Dimensions: square, at or above the minimum stated on your Site Icon screen. Exporting at the minimum or larger lets WordPress generate its smaller sizes from a sharp source.
• Colour: sRGB, the standard colour space for screens.
• Background: transparent only if the mark passes the light and dark tab test. Otherwise use a solid background tile.
• Anti-aliasing: on, so curved and diagonal edges are smoothed.
• If you plan to use the custom-code route with an SVG, export a plain SVG and remove editor-specific metadata, embedded raster images and unused definitions.

Step 2: Set the Site Icon (changes the admin favicon and the public favicon)

Where the setting appears depends on your WordPress version and on whether the active theme is a classic theme or a block theme. The supplied material does not confirm the menu paths for a specific release. Check whichever of these locations your installation shows.

• Classic themes: go to Appearance, then Customize, then Site Identity, and find the Site Icon control.
• Block themes: look for a Site Icon field under Settings, then General. Alternatively, in the Site Editor, select the Site Logo block and look for an option to use the logo as the site icon.
• In any of these locations, choose Select site icon or Change site icon, upload the prepared PNG, and crop it if prompted. If the artwork is already square, the crop should cover the whole image.
• Save or publish the change. In the Customizer, the change is not live until you click Publish.

Step 3 (optional): Use a separate favicon for the dashboard only

WordPress core prints the Site Icon on admin pages and on the login page through the admin_head and login_head hooks. To show a different icon there, remove the core output on those two hooks and print your own icon tag instead. Removing the core output first prevents two competing icon tags on the same page. The safest place for this code is a small custom plugin, because it then survives theme changes and updates. Put the image file in the same plugin folder.

<?php
/**
 * Plugin Name: Admin Favicon
 * Description: Uses a separate favicon on admin and login screens.
 */

// Stop WordPress printing the Site Icon on admin and login pages.
remove_action( 'admin_head', 'wp_site_icon' );
remove_action( 'login_head', 'wp_site_icon' );

function admin_favicon_output() {
	$icon = plugins_url( 'admin-favicon.png', __FILE__ );
	echo '<link rel="icon" type="image/png" href="' . esc_url( $icon ) . '" />' . "\n";
}
add_action( 'admin_head', 'admin_favicon_output' );
add_action( 'login_head', 'admin_favicon_output' );

• Create a folder in the plugins directory, for example admin-favicon.
• Save the code above as a PHP file in that folder, and place admin-favicon.png beside it.
• Activate the plugin from the Plugins screen.
• To serve an SVG with a PNG fallback, print a second link tag with type image/svg+xml pointing to the SVG file. Browsers that support SVG favicons can then pick it up, and the others fall back to the PNG.
• If you only want the dashboard changed and the login page left alone, delete the two lines that reference login_head.

Step 4: Confirm the result

Browsers cache favicons aggressively. An unchanged tab icon right after saving does not necessarily mean the change failed. Check the page source before assuming something is wrong.

• Open the dashboard and view the page source. Search for rel="icon". The link should point to the new file: a cropped Site Icon image if you used Step 2, or the plugin's image if you used Step 3.
• If you used Step 3, confirm there is only one set of icon tags and that the old Site Icon links are gone.
• Open the dashboard in a private or incognito window, or a different browser, to bypass the cached icon.
• If the tab still shows the old icon, clear the browser cache, or close and reopen the tab. If the site uses a caching plugin or a CDN, purge that cache too. Note that admin pages are not usually cached by page-caching plugins.
• Check the tab with the browser or operating system in both light and dark mode, and confirm the mark is legible in each.
• Visit the public site and confirm it shows the icon you intended, either the shared Site Icon or the unchanged public icon if you set up an admin-only override.

Gaps to check for your own installation

Some details could not be confirmed from the supplied material and should be checked on your own site: the exact menu location of the Site Icon setting in your WordPress version and theme, the current minimum size stated on the upload screen, and current browser support for SVG favicons and dark-mode switching. Security or hosting plugins that alter the login page may also print their own icon tags. If the result is not what you expect, review the page source on the login screen separately from the dashboard.