From 68ccb6d820a295ae236ba3df537d44fdf8668cb8 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <ashar.fuadi@automattic.com>
Date: Fri, 10 Jul 2026 18:11:54 +0700
Subject: [PATCH] Admin bar: correctly preview site title changes when there's
 site icon

---
 src/js/_enqueues/admin/site-icon.js | 19 +++++++++++++++++++
 src/wp-admin/includes/options.php   |  5 +++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index a658f16e0b61a..a4f94797a5a48 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -14,6 +14,8 @@
 		$appIconPreview = $( '#app-icon-preview' ),
 		$hiddenDataField = $( '#site_icon_hidden_field' ),
 		$removeButton = $( '#js-remove-site-icon' ),
+		$adminBarSiteName = $( '#wp-admin-bar-site-name' ),
+		$adminBarSiteNameLink = $adminBarSiteName.children( 'a' ).first(),
 		frame;
 
 	/**
@@ -194,6 +196,19 @@
 			'url(' + attributes.url + ')'
 		);
 
+		// Replace the site icon in the admin bar.
+		$adminBarSiteNameLink.children( 'img.site-icon' ).remove();
+		$( '<img />' )
+			.attr( {
+				class: 'site-icon',
+				src: attributes.url,
+				alt: '',
+				width: 20,
+				height: 20,
+			} )
+			.prependTo( $adminBarSiteNameLink );
+		$adminBarSiteName.addClass( 'has-site-icon' );
+
 		// If the choose button is not in the update state, swap the classes.
 		if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
 			$chooseButton.attr( {
@@ -225,6 +240,10 @@
 			alt: '',
 		} );
 
+		// Remove the site icon from the admin bar.
+		$adminBarSiteNameLink.children( 'img.site-icon' ).remove();
+		$adminBarSiteName.removeClass( 'has-site-icon' );
+
 		/**
 		 * Resets state to the button, for correct visual style and state.
 		 * Updates the text of the button.
diff --git a/src/wp-admin/includes/options.php b/src/wp-admin/includes/options.php
index 5742e3ccc1ccc..cd9bff786f1a8 100644
--- a/src/wp-admin/includes/options.php
+++ b/src/wp-admin/includes/options.php
@@ -40,14 +40,15 @@ function options_general_add_js() {
 			homeURL = ( <?php echo wp_json_encode( get_home_url(), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );
 
 		$( '#blogname' ).on( 'input', function() {
-			var title = $.trim( $( this ).val() ) || homeURL;
+			var title = $.trim( $( this ).val() ) || homeURL,
+				$siteIcon = $siteName.children();
 
 			// Truncate to 40 characters.
 			if ( 40 < title.length ) {
 				title = title.substring( 0, 40 ) + '\u2026';
 			}
 
-			$siteName.text( title );
+			$siteName.text( title ).prepend( $siteIcon );
 			$siteIconPreview.text( title );
 		});