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

Closed
fushar wants to merge 12 commits into from
Closed

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
12 commits
Select commit Hold shift + click to select a range
b2a824c
Admin bar: show site icon if set
fushar May 9, 2026
33e9fd2
Update border-radius to 2px on desktop resolution
fushar May 12, 2026
6f2438e
Fix multisite behavior
fushar Jun 19, 2026
e43b62e
Make CSS centering consistent with avatar
fushar Jun 19, 2026
a413c11
Use has_site_icon; fold one level
fushar Jun 19, 2026
3c7c13d
Update img logic
fushar Jun 19, 2026
05da088
Add comment on background color choice
fushar Jun 19, 2026
a01a690
Use existing image size constants
fushar Jun 19, 2026
a6287c5
Fix test
fushar Jun 22, 2026
45a39f4
Adjust site icon margin
fushar Jun 29, 2026
a346946
Use flexbox rather than magic values
fushar Jun 30, 2026
c8788fc
Check whether 2x image is same as original image
fushar Jul 2, 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
26 changes: 23 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,35 @@ 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_url = get_site_icon_url( 32 );
$site_icon_url_2x = get_site_icon_url( 64 );
$srcset = ( $site_icon_url_2x && $site_icon_url !== $site_icon_url_2x ) ? sprintf( ' srcset="%s 2x"', esc_url( $site_icon_url_2x ) ) : '';
$site_icon = sprintf(
'<img class="site-icon" src="%s"%s alt="" width="20" height="20" />',
esc_url( $site_icon_url ),
$srcset
);

$title = $site_icon . $title;
$meta['class'] = 'has-site-icon';
Comment thread
scruffian marked this conversation as resolved.
}
}

$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
33 changes: 32 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 @@ -539,6 +539,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 @@ -584,6 +588,23 @@ html:lang(he-il) .rtl #wpadminbar * {
content: "\f102" / '';
}

#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
display: flex;
align-items: center;
gap: 6px;
}

#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;
background: #f0f0f1; /* matching my-account (user avatar) node's background */
border-radius: 2px;
}



/**
Expand Down Expand Up @@ -905,7 +926,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 @@ -920,6 +941,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