Add a logo to the top of wordpress admin menu - wordpress

Question

I tried to add a logo to the admin menu as a menu item background image, but it seems not the best approach because when I try to add padding or margins to it, its position change and do not fit correctly, as shown in the image:
https://i.stack.imgur.com/ZpH3q.png
And I used the following code:
/********************************************************/
/* INSERT ADMIN LOGO
/********************************************************/
add_action('admin_menu', 'shomtek_admin_menu');
function shomtek_admin_menu() {
global $menu;
$url = 'https://google.com/';
$menu[0] = array( __('SHOMTek'), 'read', $url, 'shomtek-logo', 'shomtek-logo');
}
/*ADMIN LOGO STYLES*/
#adminmenu a.shomtek-logo{
display: block;
background: url(https://example.com/logo.svg) no-repeat center center;
background-size: 140px 40px;
width: 140px;
opacity: 1;
height: 40px;
margin: 0 auto;
padding-top: 20px;
}
Can you please recommend the best approach to add a logo to the top of wordpress admin menu?
Thanks

Answer 1

Follow these steps:
1- Create a menu on the top of the side menu:
add_action( 'admin_menu', 'register_my_custom_menu_page' );
function register_my_custom_menu_page() {
add_menu_page( 'Custom Menu Page Title', 'Custom Menu Page', 'manage_options', 'logo_based_menu', '', '', 1);
}
2- Add custom CSS code to print the logo inside that menu:
function admin_style() {
echo '<style>
#toplevel_page_logo_based_menu {
background-image: url('. get_field ("option", "logo_image") . ');
}
#toplevel_page_logo_based_menu > a, #toplevel_page_logo_based_menu > a > div.wp-menu-image {
display: none;
}
</style>';
}
add_action('admin_enqueue_scripts', 'admin_style');