Cacher is the code snippet organizer for pro developers

ADDING FAVICONS TO THE WORDPRESS ADMIN

// Tip: Use a black and white favicon for the admin area, that way you can see at a glance which tabs are from the admin

// First, create a function that includes the path to your favicon
function add_favicon() {
   $favicon_url = get_stylesheet_directory_uri() . '/images/icons/admin-favicon.ico';
 echo '<link rel="shortcut icon" href="' . $favicon_url . '" />';
}
  
// Now, just make sure that function runs when you're on the login page and admin pages  
add_action('login_head', 'add_favicon');
add_action('admin_head', 'add_favicon');


Source: https://cnpagency.com/blog/how-to-use-favicons-on-the-wordpress-admin-login-pages/

PREFACE
If you want to understand favicons, apple touch icons, microsoft tileimages, msapplication-squares, android-chrome-icons and whatever ELSE is in between, when they are used, what is ACTUALLY necessary (because hi hello do you really think anyone is going to pin your little website to their homescreenstartmenutouchpod?), GOOD LUCK. Be prepared to waste hours out of your life looking at outdated and incorrect information. You will be very confused. 

Tip: Give up on understanding this shit and just use the basic template unless you think people will actually pin your website to their homescreenstartmenutouchpod.


Theme color:

<!-- Theme Color -->
<meta name="theme-color" content="#fff">
- changes the color of the address bar 


Basic template:

<!-- Theme Color -->
<meta name="theme-color" content="#fff">
<!-- Favicon -->
<link rel="icon" href="/favicon-32x32.png" sizes="32x32">
- favicon.ico: 32×32 png file with .ico extension that looks decent at 16×16. You don’t even need to reference it in the html, browsers look for it automatically at the root, that is: http://www.example.com/favicon.ico


Wordpress version:

<!-- Theme Color -->
<meta name="theme-color" content="#fff">
<!-- Favicon -->
<link rel="icon" href="<?php echo get_template_directory_uri() ?>/images/favicons/favicon-32x32.png" sizes="32x32">


Exhaustive template:

<!-- **** Favicons **** -->
<!-- Theme Color -->
<meta name="theme-color" content="#fff">
<!-- Windows 8 Tile -->
<meta name="msapplication-square70x70logo" content="smalltile.png" />
<meta name="msapplication-square150x150logo" content="mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="widetile.png" />
<meta name="msapplication-square310x310logo" content="largetile.png" />
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-152x152.png" />
<!-- Everyone else -->
<link rel="icon" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">