How to Display a Different Favicon for the WordPress Admin Panel

Home » Snippets » How to Display a Different Favicon for the WordPress Admin Panel
0

Created with:

Visibility: 

public

Creator: WPTurbo Team

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project

When you log into your WordPress admin panel, you might notice that the favicon in your browser tab is the same as your site’s favicon. While this is not a big deal, it can be helpful to have a different favicon for your admin area to quickly differentiate between your site and the backend. In this article, we’ll show you how to display a different favicon for wp-admin, making it easier to manage your WordPress site.

					function wpturbo_change_admin_favicon() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="' . esc_url( get_stylesheet_directory_uri() ) . '/admin-favicon.ico" />';
}
add_action( 'admin_head', 'wpturbo_change_admin_favicon' );
				

The code snippet above enables you to display a different favicon for your WordPress admin dashboard. It does this by defining a new function called wpturbo_change_admin_favicon() that outputs a link HTML tag for the new favicon with a reference to its file path.

To add the function to the WordPress admin head, we must hook it into the admin_head action. This ensures that the function is executed every time the admin dashboard is loaded.

add_action( 'admin_head', 'wpturbo_change_admin_favicon' );

The function wpturbo_change_admin_favicon() uses PHP’s echo statement to output the link tag that includes the shortcut icon type, the href attribute, and the get_stylesheet_directory_uri() function call which ensures that the URL to the new favicon follows the secure HTTPS protocol.

echo '<link rel="shortcut icon" type="image/x-icon" href="' . esc_url( get_stylesheet_directory_uri() ) . '/admin-favicon.ico" />';

Note that the code above assumes that you have placed your new favicon file in your WordPress theme folder, in this case, a file named admin-favicon.ico. Make sure to replace this with the relative path to your file location and file name.

That’s it! By including this snippet in your WordPress website code, you can ensure that the favicon for your WordPress dashboard stands out, making it easier to find and distinguish from your other tabs and windows.

Register an account to save your snippets or go Pro to get more features.