WordPress 3.8 is out I have the following code to remove admin bar logo.

 function no_wp_logo_admin_bar_remove() {
    global $wp_admin_bar;
    $wp_admin_bar->remove_menu('wp-logo');
}
add_action('wp_before_admin_bar_render', 'no_wp_logo_admin_bar_remove', 0);

However I would like to know how can I replace it with my own logo (upload) and not a dashicon?

WordPress 3.8 is out I have the following code to remove admin bar logo.

 function no_wp_logo_admin_bar_remove() {
    global $wp_admin_bar;
    $wp_admin_bar->remove_menu('wp-logo');
}
add_action('wp_before_admin_bar_render', 'no_wp_logo_admin_bar_remove', 0);

However I would like to know how can I replace it with my own logo (upload) and not a dashicon?

• admin-bar
• logo

4 Answers 4

That's controlled by a Dashicon (font icon) and a before statement:

#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
content: '\f120';
top: 2px;
}

What you'd want is to replace the content call.

Use a built in Dashicon from here: http://melchoyce.github.io/dashicons/

So the smilie would be content: '\f328;`

I was also searching for the same and found no "hookey" way to change it. But here is the alternate solution for this: and it has two possible ways. Assume that we are using some image icon over there, let it be your brand / site icon.
First method: (Easy) Use uploaded png logo
Inside your function.php / plugins file

function dashboard_logo() {
    echo '
        <style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo>.ab-item {
    padding: 0 7px;
    background-image: url([URL]LOGO.PNG) !important;
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
}
#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon:before {
    content: " ";
    top: 2px;
}
        </style>
    ';
}
add_action('wp_before_admin_bar_render', 'dashboard_logo');

Second method: Dashicon method: Using custom dashicons/ icon fonts.
Create your own icon files.
You can use IcoMoon.How to create the icon file?
Create your icon in SVG and use icomoon to generate your font file from SVG.
Now add the font to your markup.

function dashboard_logo() {
    echo '
        <style type="text/css">
@font-face {
    font-family: "UR_ICON_NAME";
    src: url('[TEMPLATE_DIRECTORY]/fonts/UR_ICON_NAME.ttf'),
         url('[TEMPLATE_DIRECTORY]/fonts/UR_ICON_NAME.eot');
}
#wpadminbar #wp-admin-bar-wp-logo>.ab-item .ab-icon:before {
    content: "[\UNICODE]";
    top: 2px;
}
        </style>
    ';
}
add_action('wp_before_admin_bar_render', 'dashboard_logo');

please use exact urls and unicode as per your need.
Replace [TEMPLATE_DIRECTORY] and [\UNICODE].
Explanation:
I did not found any hooks to change that in a pretty straightforward manner also it was not available in older versions too. If there is then please let me know in the comments below!
However the idea is to override the css and use your own icon file instead of the default one. In previous versions, WP was using the png image icon with a background property which was easy to override though.
The latest versions of WordPress is using the icon font (dashicons) method for this and also this icon set has other icons. So you cannot simply remove that if you just wanna change the WordPress icon.

You may place your own logo there like this:

function custom_admin_logo(){
    echo '
        <style type="text/css">
            #wp-admin-bar-wp-logo .ab-icon:before{ content:"" !important; }
            #wp-admin-bar-wp-logo .ab-icon{ background-image: url(path/to/your/logo.png) !important; }
        </style>
    ';
}
add_action( 'admin_head', 'custom_admin_logo' );

But, if you wanted to completely remove the corresponding Wordpress menu, including the W logo and its sub-menu stuff and then add your ownlogo, You may do it like this:

function remove_wp_logo( $wp_admin_bar ){
    $wp_admin_bar->remove_node( 'wp-logo' );
}
add_action( 'admin_bar_menu', 'remove_wp_logo', 100 );

function add_my_own_logo( $wp_admin_bar ) {
    $args = array(
        'id'    => 'my-logo',
        'meta'  => array( 'class' => 'my-logo', 'title' => 'logo' )
    );
    $wp_admin_bar->add_node( $args );
}
add_action( 'admin_bar_menu', 'add_my_own_logo', 1 );

Then let some CSS do the remaining part for you:

.my-logo div{
    width: 32px;
    height: 32px;
    background-image: url( path/to/logo.png ) no-repeat;
}

Use this plugin https://wordpress/plugins/white-label-cms/

or

Try This Code

function wpb_custom_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}

//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');