diff --git a/src/js/_enqueues/admin/site-icon.js b/src/js/_enqueues/admin/site-icon.js
index 5b4bc28a2044f..d032d89d7ee90 100644
--- a/src/js/_enqueues/admin/site-icon.js
+++ b/src/js/_enqueues/admin/site-icon.js
@@ -1,15 +1,40 @@
-(function($) {
-	var frame;
-
-	function calculateImageSelectOptions ( attachment ) {
-		var realWidth  = attachment.get( 'width' ),
+/**
+ * Handle the site icon setting in options-general.php.
+ *
+ * @since 6.5.0
+ * @output wp-admin/js/site-icon.js
+ */
+
+/* global jQuery, wp */
+
+( function ( $ ) {
+	var $chooseButton = $( '#choose-from-library-button' ),
+		$iconPreview = $( '#site-icon-preview' ),
+		$browserIconPreview = $( '#browser-icon-preview' ),
+		$appIconPreview = $( '#app-icon-preview' ),
+		$hiddenDataField = $( '#site_icon_hidden_field' ),
+		$removeButton = $( '#js-remove-site-icon' ),
+		frame;
+
+	/**
+	 * Calculate image selection options based on the attachment dimensions.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param {Object} attachment The attachment object representing the image.
+	 * @return {Object} The image selection options.
+	 */
+	function calculateImageSelectOptions( attachment ) {
+		var realWidth = attachment.get( 'width' ),
 			realHeight = attachment.get( 'height' ),
 			xInit = 512,
 			yInit = 512,
 			ratio = xInit / yInit,
-			xImg  = xInit,
-			yImg  = yInit,
-			x1, y1, imgSelectOptions;
+			xImg = xInit,
+			yImg = yInit,
+			x1,
+			y1,
+			imgSelectOptions;
 
 		if ( realWidth / realHeight > ratio ) {
 			yInit = realHeight;
@@ -35,104 +60,177 @@
 			x1: x1,
 			y1: y1,
 			x2: xInit + x1,
-			y2: yInit + y1
+			y2: yInit + y1,
 		};
 
 		return imgSelectOptions;
 	}
 
-	$( function() {
-		// Build the choose from library frame.
-		$( '#choose-from-library-link' ).on( 'click', function() {
-			var $el = $(this);
-
-			// Create the media frame.
-			frame = wp.media({
-				button: {
-					// Set the text of the button.
-					text: $el.data('update'),
-					// Don't close, we might need to crop.
-					close: false
-				},
-				states: [
-					new wp.media.controller.Library({
-						title: $el.data( 'choose' ),
-						library: wp.media.query({ type: 'image' }),
-						date: false,
-						suggestedWidth: $el.data( 'size' ),
-						suggestedHeight: $el.data( 'size' )
-					}),
-					new wp.media.controller.SiteIconCropper({
-						control: {
-							params: {
-								width: $el.data( 'size' ),
-								height: $el.data( 'size' )
-							}
+	/**
+	 * Initializes the media frame for selecting or cropping an image.
+	 *
+	 * @since 6.5.0
+	 */
+	$chooseButton.on( 'click', function () {
+		var $el = $( this );
+
+		// Create the media frame.
+		frame = wp.media( {
+			button: {
+				// Set the text of the button.
+				text: $el.data( 'update' ),
+
+				// Don't close, we might need to crop.
+				close: false,
+			},
+			states: [
+				new wp.media.controller.Library( {
+					title: $el.data( 'choose-text' ),
+					library: wp.media.query( { type: 'image' } ),
+					date: false,
+					suggestedWidth: $el.data( 'size' ),
+					suggestedHeight: $el.data( 'size' ),
+				} ),
+				new wp.media.controller.SiteIconCropper( {
+					control: {
+						params: {
+							width: $el.data( 'size' ),
+							height: $el.data( 'size' ),
 						},
-						imgSelectOptions: calculateImageSelectOptions
-					})
-				]
-			});
-
-			frame.on( 'cropped', function( attachment) {
-				$( '#site_icon_hidden_field' ).val(attachment.id);
-				switchToUpdate(attachment.url);
+					},
+					imgSelectOptions: calculateImageSelectOptions,
+				} ),
+			],
+		} );
+
+		frame.on( 'cropped', function ( attachment ) {
+			$hiddenDataField.val( attachment.id );
+			switchToUpdate( attachment );
+			frame.close();
+
+			// Start over with a frame that is so fresh and so clean clean.
+			frame = null;
+		} );
+
+		// When an image is selected, run a callback.
+		frame.on( 'select', function () {
+			// Grab the selected attachment.
+			var attachment = frame.state().get( 'selection' ).first();
+
+			if (
+				attachment.attributes.height === $el.data( 'size' ) &&
+				$el.data( 'size' ) === attachment.attributes.width
+			) {
+				switchToUpdate( attachment.attributes );
 				frame.close();
-				// Start over with a frame that is so fresh and so clean clean.
-				frame = null;
-			});
-
-			// When an image is selected, run a callback.
-			frame.on( 'select', function() {
-				// Grab the selected attachment.
-				var attachment = frame.state().get('selection').first();
-
-				if ( attachment.attributes.height === $el.data('size') && $el.data('size') === attachment.attributes.width ) {
-					// Set the value of the hidden input to the attachment id.
-					$( '#site_icon_hidden_field').val(attachment.id);
-					switchToUpdate(attachment.attributes.url);
-					frame.close();
-				} else {
-					frame.setState( 'cropper' );
-				}
-			});
-
-			frame.open();
-		});
-	});
-
-	function switchToUpdate( url ){
-		// Set site-icon-img src to the url and remove the hidden class.
-		$( '#site-icon-preview').find('img').not('.browser-preview').each( function(i, img ){
-			$(img).attr('src', url );
-		});
-		$( '#site-icon-preview' ).removeClass( 'hidden' );
-		// Remove hidden class from remove.
-		$( '#js-remove-site-icon' ).removeClass( 'hidden' );
-		// If the button is not in the update state, swap the classes.
-		if( $( '#choose-from-library-link' ).attr( 'data-state' ) !== '1' ){
-			var classes = $( '#choose-from-library-link' ).attr( 'class' );
-			$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr('data-alt-classes') );
-			$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
-			$( '#choose-from-library-link' ).attr( 'data-state', '1' );
+
+				// Set the value of the hidden input to the attachment id.
+				$hiddenDataField.val( attachment.id );
+			} else {
+				frame.setState( 'cropper' );
+			}
+		} );
+
+		frame.open();
+	} );
+
+	/**
+	 * Update the UI when a site icon is selected.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param {array} attributes The attributes for the attachment.
+	 */
+	function switchToUpdate( attributes ) {
+		var i18nAppAlternativeString, i18nBrowserAlternativeString;
+
+		if ( attributes.alt ) {
+			i18nAppAlternativeString = wp.i18n.sprintf(
+				/* translators: %s: The selected image alt text. */
+				wp.i18n.__( 'App icon preview: Current image: %s' ),
+				attributes.alt
+			);
+			i18nBrowserAlternativeString = wp.i18n.sprintf(
+				/* translators: %s: The selected image alt text. */
+				wp.i18n.__( 'Browser icon preview: Current image: %s' ),
+				attributes.alt
+			);
+		} else {
+			i18nAppAlternativeString = wp.i18n.sprintf(
+				/* translators: %s: The selected image filename. */
+				wp.i18n.__(
+					'App icon preview: The current image has no alternative text. The file name is: %s'
+				),
+				attributes.filename
+			);
+			i18nBrowserAlternativeString = wp.i18n.sprintf(
+				/* translators: %s: The selected image filename. */
+				wp.i18n.__(
+					'Browser icon preview: The current image has no alternative text. The file name is: %s'
+				),
+				attributes.filename
+			);
 		}
 
-		// swap the text of the button
-		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-update-text' ) );
+		// Set site-icon-img src and alternative text to app icon preview.
+		$appIconPreview.attr( {
+			src: attributes.url,
+			alt: i18nAppAlternativeString,
+		} );
+
+		// Set site-icon-img src and alternative text to browser preview.
+		$browserIconPreview.attr( {
+			src: attributes.url,
+			alt: i18nBrowserAlternativeString,
+		} );
+
+		// Remove hidden class from icon preview div and remove button.
+		$iconPreview.removeClass( 'hidden' );
+		$removeButton.removeClass( 'hidden' );
+
+		// If the choose button is not in the update state, swap the classes.
+		if ( $chooseButton.attr( 'data-state' ) !== '1' ) {
+			$chooseButton.attr( {
+				class: $chooseButton.attr( 'data-alt-classes' ),
+				'data-alt-classes': $chooseButton.attr( 'class' ),
+				'data-state': '1',
+			} );
+		}
+
+		// Swap the text of the choose button.
+		$chooseButton.text( $chooseButton.attr( 'data-update-text' ) );
 	}
 
-	$( '#js-remove-site-icon' ).on( 'click', function() {
-		$( '#site_icon_hidden_field' ).val( 'false' );
-		$( '#site-icon-preview' ).toggleClass( 'hidden' );
+	/**
+	 * Handles the click event of the remove button.
+	 *
+	 * @since 6.5.0
+	 */
+	$removeButton.on( 'click', function () {
+		$hiddenDataField.val( 'false' );
 		$( this ).toggleClass( 'hidden' );
-
-		var classes = $( '#choose-from-library-link' ).attr( 'class' );
-		$( '#choose-from-library-link' ).attr( 'class', $( '#choose-from-library-link' ).attr( 'data-alt-classes' ) );
-		$( '#choose-from-library-link' ).attr( 'data-alt-classes', classes );
-
-		// Swap the text of the button.
-		$( '#choose-from-library-link' ).text( $( '#choose-from-library-link' ).attr( 'data-choose-text' ) );
-		// Set the state of the button so it can be changed on new icon.
-		$( '#choose-from-library-link' ).attr( 'data-state', '');
-	});
-}(jQuery));
+		$iconPreview.toggleClass( 'hidden' );
+		$browserIconPreview.attr( {
+			src: '',
+			alt: '',
+		} );
+		$appIconPreview.attr( {
+			src: '',
+			alt: '',
+		} );
+
+		/**
+		 * Resets state to the button, for correct visual style and state.
+		 * Updates the text of the button.
+		 * Sets focus state to the button.
+		 */
+		$chooseButton
+			.attr( {
+				class: $chooseButton.attr( 'data-alt-classes' ),
+				'data-alt-classes': $chooseButton.attr( 'class' ),
+				'data-state': '',
+			} )
+			.text( $chooseButton.attr( 'data-choose-text' ) )
+			.trigger( 'focus' );
+	} );
+} )( jQuery );
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index db76d6cb05e7a..63eb3e88eb6ee 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -789,7 +789,7 @@ ul#add-to-blog-users {
 	outline: 2px solid transparent;
 }
 
-.button-add-site-icon{
+.button-add-site-icon {
 	width: 100%;
 	cursor: pointer;
 	text-align: center;
@@ -801,23 +801,23 @@ ul#add-to-blog-users {
 }
 
 .button-add-site-icon:focus,
-.button-add-site-icon:hover{
-	background: white;
+.button-add-site-icon:hover {
+	background: #fff;
 }
 
-.site-icon-section .favicon-preview{
+.site-icon-section .favicon-preview {
 	float: left;
 }
-.site-icon-section .app-icon-preview{
+.site-icon-section .app-icon-preview {
 	float: left;
 	margin: 0 20px;
 }
 
-.site-icon-section .site-icon-preview img{
+.site-icon-section .site-icon-preview img {
 	max-width: 100%;
 }
 
-.button-ad-site-icon:focus{
+.button-add-site-icon:focus {
 	background-color: #fff;
 	border-color: #3582c4;
 	border-style: solid;
diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css
index 5660e9a39e81c..7c7b32fe58aae 100644
--- a/src/wp-admin/css/site-icon.css
+++ b/src/wp-admin/css/site-icon.css
@@ -7,7 +7,6 @@
 	overflow: hidden;
 	position: relative;
 	max-width: 180px;
-	float: left;
 }
 
 .site-icon-preview .favicon,
diff --git a/src/wp-admin/includes/options.php b/src/wp-admin/includes/options.php
index 816313ce83379..2ede58cfa3554 100644
--- a/src/wp-admin/includes/options.php
+++ b/src/wp-admin/includes/options.php
@@ -36,6 +36,7 @@ function options_general_add_js() {
 <script type="text/javascript">
 	jQuery( function($) {
 		var $siteName = $( '#wp-admin-bar-site-name' ).children( 'a' ).first(),
+			$siteIconPreview = $('#site-icon-preview-site-title'),
 			homeURL = ( <?php echo wp_json_encode( get_home_url() ); ?> || '' ).replace( /^(https?:\/\/)?(www\.)?/, '' );
 
 		$( '#blogname' ).on( 'input', function() {
@@ -47,6 +48,7 @@ function options_general_add_js() {
 			}
 
 			$siteName.text( title );
+			$siteIconPreview.text( title );
 		});
 
 		$( 'input[name="date_format"]' ).on( 'click', function() {
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
index 56020d533fb9e..c704829b49611 100644
--- a/src/wp-admin/options-general.php
+++ b/src/wp-admin/options-general.php
@@ -107,34 +107,70 @@
 
 	$classes_for_upload_button = 'upload-button button-add-media button-add-site-icon';
 	$classes_for_update_button = 'button';
+	$classes_for_wrapper       = '';
 
-	$classes_for_avatar = 'avatar avatar-150';
 	if ( has_site_icon() ) {
-		$classes_for_avatar          .= ' has-site-icon';
+		$classes_for_wrapper         .= ' has-site-icon';
 		$classes_for_button           = $classes_for_update_button;
 		$classes_for_button_on_change = $classes_for_upload_button;
 	} else {
-		$classes_for_avatar          .= ' hidden';
+		$classes_for_wrapper         .= ' hidden';
 		$classes_for_button           = $classes_for_upload_button;
 		$classes_for_button_on_change = $classes_for_update_button;
 	}
 
+	// Handle alt text for site icon on page load.
+	$site_icon_id           = (int) get_option( 'site_icon' );
+	$app_icon_alt_value     = '';
+	$browser_icon_alt_value = '';
+
+	if ( $site_icon_id ) {
+		$img_alt            = get_post_meta( $site_icon_id, '_wp_attachment_image_alt', true );
+		$filename           = wp_basename( get_site_icon_url() );
+		$app_icon_alt_value = sprintf(
+			/* translators: %s: The selected image filename. */
+			__( 'App icon preview: The current image has no alternative text. The file name is: %s' ),
+			$filename
+		);
+
+		$browser_icon_alt_value = sprintf(
+			/* translators: %s: The selected image filename. */
+			__( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ),
+			$filename
+		);
 
+		if ( $img_alt ) {
+			$app_icon_alt_value = sprintf(
+				/* translators: %s: The selected image alt text. */
+				__( 'App icon preview: Current image: %s' ),
+				$img_alt
+			);
+
+			$browser_icon_alt_value = sprintf(
+				/* translators: %s: The selected image alt text. */
+				__( 'Browser icon preview: Current image: %s' ),
+				$img_alt
+			);
+		}
+	}
 	?>
-	<div id="site-icon-preview" class="site-icon-preview wp-clearfix <?php echo esc_attr( $classes_for_avatar ); ?>">
+
+
+	<div id="site-icon-preview" class="site-icon-preview wp-clearfix settings-page-preview <?php echo esc_attr( $classes_for_wrapper ); ?>">
 		<div class="favicon-preview">
 			<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="">
 			<div class="favicon">
-				<img src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>">
+				<img id="browser-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $browser_icon_alt_value ); ?>">
 			</div>
-			<span class="browser-title" aria-hidden="true"><?php echo get_bloginfo( 'name' ); ?></span>
+			<span id="site-icon-preview-site-title" class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
 		</div>
-		<img class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>">
+		<img id="app-icon-preview" class="app-icon-preview" src="<?php site_icon_url(); ?>" alt="<?php echo esc_attr( $app_icon_alt_value ); ?>">
 	</div>
+
 	<input type="hidden" name="site_icon" id="site_icon_hidden_field" value="<?php form_option( 'site_icon' ); ?>" />
 	<div class="action-buttons">
 		<button type="button"
-			id="choose-from-library-link"
+			id="choose-from-library-button"
 			type="button"
 			class="<?php echo esc_attr( $classes_for_button ); ?>"
 			data-alt-classes="<?php echo esc_attr( $classes_for_button_on_change ); ?>"
@@ -160,13 +196,10 @@ class="<?php echo esc_attr( $classes_for_button ); ?>"
 		</button>
 	</div>
 
-	<p class="description">
-		<?php _e( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. Upload one here!' ); ?>
-	</p>
 	<p class="description">
 		<?php
 			/* translators: %s: Site Icon size in pixels. */
-			printf( __( 'Site Icons should be square and at least %s pixels.' ), '<strong>512 &times; 512</strong>' );
+			printf( __( 'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. They should be square and at least %s pixels.' ), '<code>512 &times; 512</code>' );
 		?>
 	</p>
 
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index a66e8a264c65b..032a2f264061e 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -849,7 +849,8 @@ function wp_default_scripts( $scripts ) {
 
 	$scripts->add( 'wp-lists', "/wp-includes/js/wp-lists$suffix.js", array( 'wp-ajax-response', 'jquery-color' ), false, 1 );
 
-	$scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery', 'jcrop' ), false, 1 );
+	$scripts->add( 'site-icon', '/wp-admin/js/site-icon.js', array( 'jquery' ), false, 1 );
+	$scripts->set_translations( 'site-icon' );
 
 	// WordPress no longer uses or bundles Prototype or script.aculo.us. These are now pulled from an external source.
 	$scripts->add( 'prototype', 'https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js', array(), '1.7.1' );