Admin bar: Replace home/odometer dashicon with actual site icon if set by fushar · Pull Request #11781 · WordPress/wordpress-develop

fushar · 2026-05-09T07:10:10Z

Trac ticket: https://core.trac.wordpress.org/ticket/65088

This PR replaces the home / odometer dashicon, with the actual site icon, if set, in the admin bar. The icon will be 20x20px, with border-radius of 2px and background-color of #f0f0f1.

If the site has not set site icon, then the default dashicons (home / odometer) is NOT changed.

Screenshot

Before

After

Before (mobile)

After (mobile)

Use of AI Tools

I used Codex with GPT-5.5 to help with the CSS implementation, with my supervision.

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2026-05-09T07:10:20Z

Hi @fushar! 👋

Thank you for your contribution to WordPress! 💖

It looks like this is your first pull request to wordpress-develop. Here are a few things to be aware of that may help you out!

No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description.

Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making.

More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook.

Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook.

If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook.

The Developer Hub also documents the various coding standards that are followed:

Thank you,
The WordPress Project

github-actions · 2026-05-09T07:14:30Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

github-actions · 2026-05-09T07:27:51Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @lucasmendes-design.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

Core Committers: Use this line as a base for the props when committing in SVN:

Props fushar, tyxla, joen, wildworks, scruffian, sergeybiryukov.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

SergeyBiryukov · 2026-05-10T22:38:55Z

Thanks for the PR! I'm less sure about changing the dashboard (odometer) icon, as it's specifically used to get to the dashboard, and it might be confusing if both icons look the same but lead to different places depending on the context.

It also seems that the ticket only suggested changing the home icon.

lucasmendes-design · 2026-06-01T21:31:01Z

Trac comment: https://core.trac.wordpress.org/ticket/65088#comment:6

The thing to notice is that this isn't a single link, it's a contextual entry point. Depending on where you are, the same node can mean "Visit Site" or open a dropdown to the Dashboard, Plugins, and Themes. So the real question isn't "which destination should the icon show," it's "what does this touchpoint represent."

A destination icon over-promises. The odometer says "this goes to the dashboard," and a house says "this goes home," but the node actually does several site-level things depending on context. That mismatch is the real source of confusion, the icon makes a promise the node doesn't always keep.

The site icon removes that. The one constant across every context here is the site itself. everything in this node is site-scoped. So "site icon + site name" sets the right expectation, "things you can do for this site", and the dropdown shows the specifics.

Let me know your thoughts @SergeyBiryukov

fushar · 2026-06-02T09:59:10Z

it might be confusing if both icons look the same but lead to different places depending on the context.

To me, the current behavior is actually more confusing: the icon changes depending on whether we're on wp-admin or site frontend. It's not immediately clear that the odometer icon actually signifies "the wp-admin Dashboard".

When we update the icon to be the site icon in both cases, it becomes a consistent, fixed-point context of "the current site". It provides an entry for site-specific dropdown actions such as going to wp-admin and going to the site frontend. It when clicked having different destination is just a byproduct of the different first action in the dropdown.

What do you think?

jasmussen · 2026-06-03T10:45:46Z

I agree with this very much. The icon changing, but the label not, makes no sense to me, and it feels reasonable as a bandaid to at least unify them. But I would go a step further to suggest that the odometer changing like that reveals a fundamental underlying problem with how it's worked so far. To that end, I support what Lucas is proposing. A more bold alternative is to recast the WordPress icon to always take you to the dashboard (to your WordPress) and the site title always taking you to the frontend, which is what the topbar test plugin linked here does, if you'd like to try it.

Key with showing a site logo is also to ensure that, at a glance, you can always see which WordPress site you're on. If you are a power-user with multiple open WordPress tabs, unless you're careful, you might end up uploading private information to the wrong website. So we need clear delineation between sites, which the distinct-per-site site log would help do. I've seen this happen in support issues.

lucasmendes-design · 2026-06-03T13:42:29Z

it feels reasonable as a bandaid to at least unify them.

Let's proceed with this, and then we can circle back on different actions for the W logo and Site icon + title. I'm assuming there are some plugins that can use the site name dropdown as well, so I think we need to investigate that a bit more.

tyxla · 2026-06-18T10:23:19Z

+	);
+
+	$site_icon_url = get_site_icon_url( 64 );
+	if ( $site_icon_url ) {


Also see the is_network_admin() and is_user_admin() checks above. When those are true, we're not really working with the "current site" so prepending the current blog icon may not be relevant. Do we need to handle those cases separately? Have we done any multisite testing of these changes?

Thanks, I totally forgot about multisite. I also realized that the My Sites dropdown already renders the site icon, so this PR makes it even more consistent 😄

I added checks for is_network_admin() and is_user_admin() in 0975127. Now the icon does not render on those pages.

tyxla · 2026-06-19T12:16:44Z

 	margin: 0 8px 2px -2px;
 }

+#wpadminbar .quicklinks li img.blavatar {


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

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:

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

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:

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

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.

tyxla

Pending one minor text fix, this is looking good to me.

Let's also make sure that we have a design approval here before we 🚢 .

tyxla · 2026-06-22T10:47:35Z

+		$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( 28 ) ), $node_site_name->title );


Seems like we need to fix this size as well.

Suggested change

$this->assertStringContainsString( esc_url( get_site_icon_url( 28 ) ), $node_site_name->title );

$this->assertStringContainsString( esc_url( get_site_icon_url( 32 ) ), $node_site_name->title );

Good catch. Fixed, thanks!

fushar · 2026-06-22T11:01:47Z

@tyxla Thanks for the super detailed review. I really appreciate it.

Let's also make sure that we have a design approval here before we 🚢 .

I believe @lucasmendes-design & @jasmussen have already given their blessings, can you confirm 😄

tyxla · 2026-06-22T11:05:05Z

@tyxla Thanks for the super detailed review. I really appreciate it.

No worries, let's just also make sure all checks pass - there seem to be some failures right now (seem to be one-off infra failures at first glance)

fushar · 2026-06-22T11:09:32Z

No worries, let's just also make sure all checks pass - there seem to be some failures right now (seem to be one-off infra failures at first glance)

I often have such failures in my other PR(s). I'm pretty sure they are just flaky runs, but I don't have permission to rerun the jobs 😬 usually I just force-push empty commit just to rerun them 😞 not sure what's the best practices here.

tyxla · 2026-06-22T11:37:52Z

I often have such failures in my other PR(s). I'm pretty sure they are just flaky runs, but I don't have permission to rerun the jobs 😬 usually I just force-push empty commit just to rerun them 😞 not sure what's the best practices here.

Got it. Yeah, force-pushing is the easiest thing to do if you can't rerun them. I've re-ran them for you now.

fushar · 2026-06-25T14:21:36Z

Good to go now? 😄

tyxla

Nothing else from my end, LGTM 👍

tyxla · 2026-06-26T15:28:54Z

+	width: 20px;
+	height: 20px;
+	vertical-align: middle;
+	margin: -2px 6px 0 0;


Could still be nice to explain with a comment where the magical values come from.

In my environment, the image appears to be slightly shifted downwards.

Oops good catch, when I played around with the margin values, I had my black left sidebar expanded so it might have biased my eyes 😓 updated the margin in 4808504.

Re: comment. Do we really need it? As noted in #11781 (comment), it's a common practice already in existing CSS 😬

I think it's useful, regardless of how it's done elsewhere.

Maybe adding a comment in a few places will stimulate agents to add it in more in the future.

Light a spark today, tomorrow it will start a fire!

scruffian

LGTM.

Noting that if you have this PR applied and the Gutenberg experiment enabled then you end up with two site icons, but that would need fixing on the Gutenberg side.

fushar · 2026-07-01T11:57:43Z

Noting that if you have this PR applied and the Gutenberg experiment enabled then you end up with two site icons

Ah you're right, thanks, I will delete the Gutenberg experiment after this is committed, as nothing is experimental anymore by then.

When a site icon is configured, it is displayed in the WordPress admin bar in place of the home/odometer dashicon. The icon is shown at 20×20px with a border-radius of 2px. When no site icon is set, the existing dashicon behavior is preserved. Developed in #11781. Props fushar, tyxla, joen, wildworks, scruffian, sergeybiryukov, lucasmdo, joedolson. Fixes #65088. See #46657, #64308. git-svn-id: https://develop.svn.wordpress.org/trunk@62614 602fd350-edb4-49c9-b593-d223f7449a82

github-actions · 2026-07-01T18:09:16Z

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 62614
GitHub commit: 6b4f9af

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

When a site icon is configured, it is displayed in the WordPress admin bar in place of the home/odometer dashicon. The icon is shown at 20×20px with a border-radius of 2px. When no site icon is set, the existing dashicon behavior is preserved. Developed in WordPress/wordpress-develop#11781. Props fushar, tyxla, joen, wildworks, scruffian, sergeybiryukov, lucasmdo, joedolson. Fixes #65088. See #46657, #64308. Built from https://develop.svn.wordpress.org/trunk@62614 git-svn-id: http://core.svn.wordpress.org/trunk@61894 1a063a9b-81f0-0310-95a4-ce76da25c4cd

When a site icon is configured, it is displayed in the WordPress admin bar in place of the home/odometer dashicon. The icon is shown at 20×20px with a border-radius of 2px. When no site icon is set, the existing dashicon behavior is preserved. This was originally committed in [62614] but accidentally undid other changes, so it was reverted in [62620]. Developed in #11781. Props fushar, tyxla, joen, wildworks, scruffian, sergeybiryukov, lucasmdo, joedolson. Fixes #65088. See #46657, #64308. git-svn-id: https://develop.svn.wordpress.org/trunk@62625 602fd350-edb4-49c9-b593-d223f7449a82

github-actions · 2026-07-02T12:40:17Z

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 62625
GitHub commit: 006522b

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

When a site icon is configured, it is displayed in the WordPress admin bar in place of the home/odometer dashicon. The icon is shown at 20{U+00D7}20px with a border-radius of 2px. When no site icon is set, the existing dashicon behavior is preserved. This was originally committed in [62614] but accidentally undid other changes, so it was reverted in [62620]. Developed in WordPress/wordpress-develop#11781. Props fushar, tyxla, joen, wildworks, scruffian, sergeybiryukov, lucasmdo, joedolson. Fixes #65088. See #46657, #64308. Built from https://develop.svn.wordpress.org/trunk@62625 git-svn-id: http://core.svn.wordpress.org/trunk@61910 1a063a9b-81f0-0310-95a4-ce76da25c4cd

fushar marked this pull request as ready for review May 9, 2026 07:27

fushar force-pushed the admin-bar-site-icon branch 2 times, most recently from fd1099a to 646995d Compare May 9, 2026 07:40

fushar changed the title ~~Admin bar: replace home dashicon with actua site icon if set~~ Admin bar: replace home dashicon with actual site icon if set May 9, 2026

fushar changed the title ~~Admin bar: replace home dashicon with actual site icon if set~~ Admin bar: Replace home dashicon with actual site icon if set May 10, 2026

fushar force-pushed the admin-bar-site-icon branch from 646995d to 4c0c32f Compare May 10, 2026 12:15

fushar changed the title ~~Admin bar: Replace home dashicon with actual site icon if set~~ Admin bar: Replace home/odometer dashicon with actual site icon if set Jun 3, 2026

This was referenced Jun 9, 2026

WordPress 7.1: An omnipresent, consistent admin bar WordPress/gutenberg#79036

Open

Omnipresent toolbar: show site icon instead of dashicon if set WordPress/gutenberg#79049

Merged

tyxla reviewed Jun 18, 2026

View reviewed changes

fushar force-pushed the admin-bar-site-icon branch from 277561c to e6dece6 Compare June 19, 2026 10:32

tyxla reviewed Jun 19, 2026

View reviewed changes

fushar mentioned this pull request Jun 19, 2026

Show the admin bar in the Post and Site Editor by default WordPress/gutenberg#79197

Merged

tyxla reviewed Jun 22, 2026

View reviewed changes

jasmussen self-requested a review June 22, 2026 11:08

jasmussen approved these changes Jun 22, 2026

View reviewed changes

tyxla approved these changes Jun 26, 2026

View reviewed changes

scruffian approved these changes Jul 1, 2026

View reviewed changes

github-actions Bot closed this Jul 1, 2026

fushar mentioned this pull request Jul 2, 2026

Omnibar: move the 'site icon in admin bar' feature from experiment to 7.1 compat WordPress/gutenberg#79807

Merged

scruffian reopened this Jul 2, 2026

fushar force-pushed the admin-bar-site-icon branch from 342f6d2 to 775c3a6 Compare July 2, 2026 12:23

fushar added 12 commits July 2, 2026 19:25

Admin bar: show site icon if set

b2a824c

Update border-radius to 2px on desktop resolution

33e9fd2

Fix multisite behavior

6f2438e

Make CSS centering consistent with avatar

e43b62e

Use has_site_icon; fold one level

a413c11

Update img logic

3c7c13d

Add comment on background color choice

05da088

Use existing image size constants

a01a690

Fix test

a6287c5

Adjust site icon margin

45a39f4

Use flexbox rather than magic values

a346946

Check whether 2x image is same as original image

c8788fc

fushar force-pushed the admin-bar-site-icon branch from 775c3a6 to c8788fc Compare July 2, 2026 12:25

github-actions Bot closed this Jul 2, 2026

github-actions Bot mentioned this pull request Jul 2, 2026

PHP backports for WP 7.1 WordPress/gutenberg#79304

Open

This was referenced Jul 10, 2026

Admin bar: correctly preview changes to site title and icon #12474

Closed

Admin bar: hide the house dashicon / default favicon when site icon is set Automattic/jetpack#50531

Merged

fushar mentioned this pull request Jul 20, 2026

Toolbar: optimization: add 64px crop size for the site icon #12607

Closed

	$this->assertStringContainsString( esc_url( get_site_icon_url( 28 ) ), $node_site_name->title );
	$this->assertStringContainsString( esc_url( get_site_icon_url( 32 ) ), $node_site_name->title );

Uh oh!

Conversation

fushar commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshot

Before

After

Before (mobile)

After (mobile)

Use of AI Tools

Uh oh!

github-actions Bot commented May 9, 2026

Uh oh!

github-actions Bot commented May 9, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

github-actions Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

SergeyBiryukov commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucasmendes-design commented Jun 1, 2026

Uh oh!

fushar commented Jun 2, 2026

Uh oh!

jasmussen commented Jun 3, 2026

Uh oh!

lucasmendes-design commented Jun 3, 2026

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tyxla left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fushar commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tyxla commented Jun 22, 2026

Uh oh!

fushar commented Jun 22, 2026

Uh oh!

tyxla commented Jun 22, 2026

Uh oh!

fushar commented Jun 25, 2026

Uh oh!

tyxla left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fushar commented May 9, 2026 •

edited

Loading

github-actions Bot commented May 9, 2026 •

edited

Loading

SergeyBiryukov commented May 10, 2026 •

edited

Loading

fushar commented Jun 22, 2026 •

edited

Loading