Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

Adding a Custom Dashboard Logo in WordPress for Branding

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
Adding a Custom Dashboard Logo in WordPress for Branding

When creating themes for clients, you might want to provide them with some administrative branding. The first and easiest way to do that is by replacing the WordPress logo with your Custom Logo in the admin dashboard.

First you would need to create an image that has the dimensions of 30px wide and 31px tall. This image would need to be transparent either .gif or .png. The image matte color must match the background color which has the hex value of #464646.

Save that image in your theme’s image folder ( and name it whatever you like. In this example we will be naming it custom-logo.gif.

Now open your functions.php file located in your themes folder and add the following function in there:

//hook the administrative header output
add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
echo '
<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }

By adding this function, you are telling WordPress to add a function my_custom_logo in the field admin_head. This function will replace the original WordPress ‘W’ with your custom logo.

This is how it would look:

Custom Dashboard Logo in WordPress for Branding

This trick is from Jacob Goldman’s Article on Smashing Magazine

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. michalszymaniak says:

    for present version (4.3.1) you need something like:

    add_action(‘admin_head’, ‘my_custom_logo’);

    function my_custom_logo() {
    echo ‘

    #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
    content: url(‘.get_stylesheet_directory_uri().’/img/custom-logo);
    top: 0px;


  2. ifan says:

    this one work on my WP 4.1 and im not tryin yet for another WP version..

    add_action(‘admin_head’, ‘my_custom_logo’);

    function my_custom_logo() { ?>

    #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
    content: url(“/img/your_logo.png”);
    top: 0px;

    <?php }

  3. Lu says:

    Can’t get this to work on wp 3.8.1..

    Any updates to this technique or some other ways to achieve this?

    Thank You

  4. uchsarath says:

    Will it be override by he new code of WordPress after update?

    • WPBeginner Support says:

      No because it is stored in your theme’s functions.php file so it will be overridden if you update your theme not WordPress. It is recommended that you use it in a site specific plugin or a child theme.

  5. ADv says:

    Does this work for WP 3.x?

  6. Izzati Iyeyo says:

    Try this for WordPress 3.3.1 and above perhaps

    add_action(‘admin_head’, ‘custom_admin_logo’);

    /* Custom Dashboard Logo */
    function custom_admin_logo() {
    echo ‘

    #wp-admin-bar-wp-logo > .ab-item .ab-icon {background:url(…) no-repeat;}
    #wpadminbar.nojs #wp-admin-bar-wp-logo:hover > .ab-item .ab-icon, #wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
    background:url(..) no-repeat;}

    *… replace with the image url

  7. Ramkumar says:

    superb script thanks. but i wanna to get the image as a favicon how i get it ??

  8. Angelia says:

    Unfortunately this is no more in 3.0. I was messing around with it the other day, but, didn’t come up with the proper solution … too tired maybe? but, they have combined what used to be the logo, and the visit site button. So, if you have this implemented, you have no link to the site unfortunately. If anyone works out a fix, I’m sure all of us who’ve implemented this would love to hear it ;-)

    • milestogofromhere says:

      This still works, in version 3.0, you just have to have a 16×16 pixel logo, I have it working in v. 3.2.1

      • miguelmcolon says:

        @milestogofromhere Doesn’t work for me. Don’t Know why. I´m using v. 3.3.1

        • esdev says:

          @miguelmcolon@milestogofromhere It won’t work in 3.3+ because the site name and logo now appear in the toolbar at the top.

        • miguelmcolon says:

          Thanks! This is a time saver reply. @esdev @miguelmcolon @milestogofromhere

  9. Fernaando Lopes says:

    Great tutorial. I will make that in my personal site that uses WordPress. Congratulations.

  10. Ethan says:

    Thanks for posting this, it’s really simple to do and I think it adds a nice detail for clients.

  11. Robin Benedict says:

    how if direct replace image?

    • Editorial Staff says:

      Sorry don’t understand what you are trying to ask.

      • Cosmin says:

        I think Robin means “how about if we just replace the default image manually”

        Well, if you do that, when upgrading to a newer version of WP, your logo will get overwritten and you’ll end up having the same WordPress logo in the admin :)

  12. Inside the Webb says:

    I can see how this would benefit larger blogs. Having multiple authors logging in many different blogs, it’s good to have your backend stand out. I may have to implement this

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.