Display a different favicon for different environment types, while respecting the site icon setting.

functions.php

function prefix_site_icon() {

  // I'm assuming separate files for separate environments.
  // You could adapt this to one svg icon with different css varaibles controlling the color per environemnt.

	if ( ! has_site_icon() ) {

    // this is your default/production favicon
		$icon  = '<link rel="apple-touch-icon" sizes="180x180" href="">';
		$icon .= "\n" . '<link rel="icon" type="image/png" sizes="32x32" href="">';
		$icon .= "\n" . '<link rel="icon" type="image/png" sizes="16x16" href="">';

		if ( 'development' === wp_get_environment_type() ) {
      // this is the favicon when your environment type is set to "development"
			$icon = '<link rel="icon" href="">;
		}

		if ( 'staging' === wp_get_environment_type() ) {
			$icon = '<link rel="icon" href="">';
		}

		if ( 'local' === wp_get_environment_type() ) {
			$icon = '<link rel="icon" href="">';
		}

		echo $icon;
	}

}

add_action( 'wp_head', 'prefix_site_icon', 99 );
add_action( 'admin_head', 'prefix_site_icon', 99 );
add_action( 'login_head', 'prefix_site_icon', 99 );