[wp-trac] [WordPress Trac] #65088: Toolbar: Replace home dashicon with site icon in the admin bar

[WordPress Trac]

#65088: Toolbar: Replace home dashicon with site icon in the admin bar
------------------------------------+-----------------------------
 Reporter:  lucasmdo                |      Owner:  (none)
     Type:  enhancement             |     Status:  new
 Priority:  normal                  |  Milestone:  Awaiting Review
Component:  Toolbar                 |    Version:
 Severity:  normal                  |   Keywords:  needs-patch
  Focuses:  ui, accessibility, css  |
------------------------------------+-----------------------------
 == 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.

 [[Image(site-icon.png)]]

 === 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65088>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform