Toolbar: Replace home dashicon with site icon in the admin bar

[lucasmdo]

Problem / Current Behavior

The admin bar displays a generic home dashicon next to the site name. This icon is the same for every WordPress site and carries no site-specific meaning. Users typically scan the admin bar rather than reading it, so a generic icon does little to help them quickly identify which site they are viewing, especially when multiple sites are open in different tabs.

The site icon (set via Settings → General or the Customizer) already serves as a unique visual identity for the site in browser tabs and mobile home screens, but it is not surfaced in the admin bar.

Proposed Enhancement

Replace the home dashicon in the admin bar with the site's icon. When no site icon is set, display a default letter icon using the first letter of the site name.

When a site icon is set

• Replace the home dashicon (dashicons-admin-home) with an <img> element using the site icon at 20×20 px.
• Apply border-radius: 2px for subtle rounded corners.
• It should be support it by HiDPI/Retina displays

When no site icon is set (default letter icon)

• Display a 20×20 px square with background-color: #3858E9 and border-radius: 2px.
• Render the first letter of the site name centered inside the square, uppercase.
• This default icon is only used in the admin bar, it does not appear in browser tabs or anywhere else, and it is not related to the Site Icon setting in Settings → General.

Rationale

• Unique visual identity: The site icon is the site's unique mark, already used in browser tabs and mobile bookmarks. Surfacing it in the admin bar reinforces that identity where users interact most.
• Scanability: Users scan but, in general, they don't read the page. A unique, site icon is faster to identify than a monochrome generic house across multiple tabs.
• Consistent experience: Even sites without a custom site icon get a more meaningful visual cue, the first letter of their site name, instead of an identical home icon on every WordPress install.

Backward Compatibility

This change is fully backward compatible:

• No existing settings or options are affected.
• Plugins or themes that modify the admin bar will continue to work.
• No deprecations needed.

Accessibility

• Both the site icon and the letter fallback should have aria-hidden="true" since the site name text is already present next to them, the icon is decorative.
• Ensure the icon does not break the admin bar's existing keyboard navigation or screen reader announcements.

Future Consideration

The default letter icon could also be extended to the browser tab favicon. When users have multiple WordPress sites open without custom site icons, all tabs display an empty space, making them hard to distinguish. Generating a letter-based favicon would solve this. However, that change has a broader scope so it is better suited as a follow-up ticket.

Related Tickets

• #46657 — Show site icon in My Sites admin menu (fixed, WP 5.8)
• #25971 — Changed site-name icon from globe to home dashicon (fixed)
• #64308 — Admin visual reskin exploration for WP 7.0

This PR replaces the home dashicon, with the actual site icon if set, in the admin bar.

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

## Use of AI Tools

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

[fushar]

site-icon-before-after

[fushar]

Hi @lucasmdo let's start with showing site icon when it's set, and keep the original behavior (home/odometer dashicon) if not set. I opened ​https://github.com/WordPress/wordpress-develop/pull/11781 for that. See the above screenshot for before-after.

I think we can tackle the generated one-letter site icon as separate ticket.

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.