Skip to content

Admin bar: Replace home/odometer dashicon with actual site icon if set #11781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fushar wants to merge 9 commits into
base: trunk
Choose a base branch
from
Open

Admin bar: Replace home/odometer dashicon with actual site icon if set #11781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2723076
Admin bar: show site icon if set
fushar May 9, 2026
6d09581
Update border-radius to 2px on desktop resolution
fushar May 12, 2026
0975127
Fix multisite behavior
fushar Jun 19, 2026
e6dece6
Make CSS centering consistent with avatar
fushar Jun 19, 2026
2b4e5d8
Use has_site_icon; fold one level
fushar Jun 19, 2026
7624e1b
Update img logic
fushar Jun 19, 2026
d803c05
Add comment on background color choice
fushar Jun 19, 2026
88aef4e
Use existing image size constants
fushar Jun 19, 2026
08123a7
Fix test
fushar Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions src/wp-includes/admin-bar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,15 +385,32 @@ function wp_admin_bar_site_menu( $wp_admin_bar ) {
}

$title = wp_html_excerpt( $blogname, 40, '…' );
$meta = array(
'menu_title' => $title,
);

if ( ! is_network_admin() && ! is_user_admin() ) {
/** This filter is documented in wp-includes/admin-bar.php */
$show_site_icons = apply_filters( 'wp_admin_bar_show_site_icons', true );

if ( true === $show_site_icons && has_site_icon() ) {
$site_icon = sprintf(
'<img class="site-icon" src="%s" srcset="%s 2x" alt="" width="20" height="20" />',
esc_url( get_site_icon_url( 32 ) ),
esc_url( get_site_icon_url( 64 ) )
);

$title = $site_icon . $title;
$meta['class'] = 'has-site-icon';
}
}

$wp_admin_bar->add_node(
array(
'id' => 'site-name',
'title' => $title,
'href' => ( is_admin() || ! current_user_can( 'read' ) ) ? home_url( '/' ) : admin_url(),
'meta' => array(
'menu_title' => $title,
),
'meta' => $meta,
)
);

Expand Down
29 changes: 28 additions & 1 deletion src/wp-includes/css/admin-bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,6 +537,10 @@ html:lang(he-il) .rtl #wpadminbar * {
margin: 0 8px 2px -2px;
}

#wpadminbar .quicklinks li img.blavatar {

@tyxla tyxla Jun 19, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Won't this also round the blavatars in the "My Sites" menu? Is that intended and has it been discussed?

@fushar fushar Jun 19, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's intentional (from my side) but we never actually discussed it because we just discovered that case now 😄

I think it's fine and consistent though. Even before this change, if you go to Settings -> General, and upload a site icon, somehow we already round it in the preview:

image

cc-ing: @jasmussen and @lucasmendes-design just in case.

@fushar fushar Jun 19, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also when cropping the image from media library; here it says "As an app icon and browser icon", already suggesting the in-app icon is rounded and browser icon (favicon) is not:

image

@lucasmendes-design lucasmendes-design Jun 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the browser, the icon has rounded corners only if you upload an image with that. Otherwise, it's like what Ashar described. LGTM!

@jasmussen jasmussen Jun 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is one of the strongest reasons for why I firmly stand by my proposal that the user avatar should also be circular. We are working with images that are 20x20px in size, people of low vision need more than the contents inside for them to indicate concepts. If we establish that sites are round-rects, and users are circles, we provide a clean and clear silhouette that is immediately accessible way to differentiating between the two.

border-radius: 2px;
}

#wpadminbar .quicklinks li div.blavatar:before {
content: "\f120";
content: "\f120" / '';
Expand Down Expand Up @@ -582,6 +586,19 @@ html:lang(he-il) .rtl #wpadminbar * {
content: "\f102" / '';
}

#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item:before {
content: none;
}

#wpadminbar #wp-admin-bar-site-name > .ab-item .site-icon {
width: 20px;
height: 20px;
vertical-align: middle;
margin: -2px 6px 0 0;
background: #f0f0f1; /* matching my-account (user avatar) node's background */
border-radius: 2px;
}



/**
Expand Down Expand Up @@ -903,7 +920,7 @@ html:lang(he-il) .rtl #wpadminbar * {

#wpadminbar #wp-admin-bar-edit > .ab-item:before,
#wpadminbar #wp-admin-bar-my-sites > .ab-item:before,
#wpadminbar #wp-admin-bar-site-name > .ab-item:before,
#wpadminbar #wp-admin-bar-site-name:not(.has-site-icon) > .ab-item:before,
#wpadminbar #wp-admin-bar-site-editor > .ab-item:before,
#wpadminbar #wp-admin-bar-customize > .ab-item:before,
#wpadminbar #wp-admin-bar-my-account > .ab-item:before,
Expand All @@ -918,6 +935,16 @@ html:lang(he-il) .rtl #wpadminbar * {
-moz-osx-font-smoothing: grayscale;
}

#wpadminbar #wp-admin-bar-site-name > .ab-item .site-icon {
position: absolute;
top: 9px;
left: 12px;
width: 28px;
height: 28px;
margin: 0;
border-radius: 4px;
}

#wpadminbar #wp-admin-bar-appearance {
margin-top: 0;
}
Expand Down
94 changes: 94 additions & 0 deletions tests/phpunit/tests/adminbar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -810,6 +810,100 @@ public function data_my_sites_network_menu_items() {
);
}

/**
* @covers ::wp_admin_bar_site_menu
*/
public function test_site_name_menu_has_no_site_icon_when_unset() {
wp_set_current_user( self::$editor_id );

$wp_admin_bar = $this->get_standard_admin_bar();
$node_site_name = $wp_admin_bar->get_node( 'site-name' );

$this->assertStringNotContainsString( 'site-icon', $node_site_name->title );
$this->assertArrayNotHasKey( 'class', $node_site_name->meta );
}

/**
* @covers ::wp_admin_bar_site_menu
* @requires function imagejpeg
*/
public function test_site_name_menu_includes_site_icon_when_set() {
wp_set_current_user( self::$editor_id );

$attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image.jpg' );
update_option( 'site_icon', $attachment_id );

$wp_admin_bar = $this->get_standard_admin_bar();
$node_site_name = $wp_admin_bar->get_node( 'site-name' );

$this->assertStringContainsString( '<img class="site-icon"', $node_site_name->title );
$this->assertStringContainsString( esc_url( get_site_icon_url( 32 ) ), $node_site_name->title );
$this->assertSame( 'has-site-icon', $node_site_name->meta['class'] );
}

/**
* @covers ::wp_admin_bar_site_menu
* @requires function imagejpeg
*/
public function test_site_name_menu_respects_show_site_icons_filter() {
wp_set_current_user( self::$editor_id );

$attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image.jpg' );
update_option( 'site_icon', $attachment_id );

add_filter( 'wp_admin_bar_show_site_icons', '__return_false' );

$wp_admin_bar = $this->get_standard_admin_bar();
$node_site_name = $wp_admin_bar->get_node( 'site-name' );

$this->assertStringNotContainsString( 'site-icon', $node_site_name->title );
$this->assertArrayNotHasKey( 'class', $node_site_name->meta );
}

/**
* @covers ::wp_admin_bar_site_menu
* @group multisite
* @group ms-required
* @requires function imagejpeg
*/
public function test_site_name_menu_has_no_site_icon_in_network_admin() {
wp_set_current_user( self::$admin_id );

$attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image.jpg' );
update_option( 'site_icon', $attachment_id );

set_current_screen( 'dashboard-network' );

$wp_admin_bar = $this->get_standard_admin_bar();
$node_site_name = $wp_admin_bar->get_node( 'site-name' );

$this->assertTrue( is_network_admin() );
$this->assertStringNotContainsString( 'site-icon', $node_site_name->title );
$this->assertArrayNotHasKey( 'class', $node_site_name->meta );
}

/**
* @covers ::wp_admin_bar_site_menu
* @group multisite
* @group ms-required
* @requires function imagejpeg
*/
public function test_site_name_menu_has_no_site_icon_in_user_admin() {
wp_set_current_user( self::$admin_id );

$attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image.jpg' );
update_option( 'site_icon', $attachment_id );

set_current_screen( 'dashboard-user' );

$wp_admin_bar = $this->get_standard_admin_bar();
$node_site_name = $wp_admin_bar->get_node( 'site-name' );

$this->assertTrue( is_user_admin() );
$this->assertStringNotContainsString( 'site-icon', $node_site_name->title );
$this->assertArrayNotHasKey( 'class', $node_site_name->meta );
}

/**
* This test ensures that WP_Admin_Bar::$proto is not defined (including magic methods).
*
Expand Down
Loading