First off, some code, because I know that’s why you’re really here.

I left a good bunch of comments, but here’s what the code does:

• It creates a function that returns a link to the favicon
• It then instructs WordPress to call that function at login_head and admin_head

// 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');

Why Favicons are Awesome and Will Make you a Cooler Person

In case you’ve been living under a rock for the past 14 years or so, a favicon is a little icon next to the page title up in the tab for a website page. Some websites use them, some don’t. But one thing we can all agree on is that the sites that have favicons are definitely cooler: that colorful little 16×16 icon is a great reminder of what site you’re on:

• It’s visual, and therefore fast
• It’s unobtrusive, but useful.
• It’s easy to put on your site

Why do I need a favicon in the WordPress admin?

While it’s easy to slap a favicon on the front-end of a site, smuggling one into WordPress admin pages can be tricky. But why does the WordPress admin even need a favicon, you ask?

Well, say you have a lot of tabs open, and you’re working on more than one WordPress site. Since there’s no visual reminder of which site is which, you might click into the wrong one by mistake. If you’re entering a lot of content, then it’s possible you’ll make that mistake dozens of times, which is about as frustrating as herding cats. With a favicon on the WordPress admin, it’s easy to see which site is which.

Best Practice: Use a Black & White Favicon for the WordPress Admin

When I started out putting favicons on WordPress admin pages, I made it the same as the front-end site, which soon led to disaster, since the page titles can be similar at times, like on post archives. Because of that, I started making admin favicons in black & white to help differentiate. The end goal was the best way to communicate where you will go when you click on a tab, and I feel like this accomplishes that.

How to create Favicons of different sizes and formats

If you think this is great and you want to spend the rest of your days forging favicons in a foundry, I recommend Icon Slate to you: it’s quick, supports different sizes and formats, and it’s cheap. It doesn’t get much better than that!