I always like to have a different favicon for the frontend and backend for the websites I manage, as it helps to easily distinguish which tabs are which.

You’ll add the code snippet below to your “functions.php” file, which allows you to do this without having to do this using a plugin. In the example below, I’m combining the login (login_head) and admin (admin_head) favicons into one icon, though you could separate those if you wanted to.

Tips:

  • You can use RealFaviconGenerator.net to help you generate your favicons and your own code. You can also go the SVG route which would allow you to customize your favicon for light and dark browser modes (for supported browsers).
  • Notice that you can also add some other related “meta” elements here while you’re at it. Notice I’ve added the “theme-color” as an example.
  • If you do use an SVG icon, run it through SVGOMG and make sure your SVG is square to prevent stretching/distortion.
  • PNGs should be transparent, and TinPNG is an excellent resource for optimizing them.
  • In the example below, I’ve included fallbacks to ICO and PNG icons for any browsers that do not yet support SVG favicons.
  • Also in the example below, I’m using “get_stylesheet_directory_uri()” for the location (typically used in child themes). You’ll want to change this to whatever works best in your situation.
// frontend favicon
function add_favicon() {
  echo '<link rel="shortcut icon" type="image/svg+xml" href="' . get_stylesheet_directory_uri() . '/favicon.svg">',"\n";
  echo '<link rel="shortcut icon" type="image/x-icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico">',"\n";
  echo '<link rel="shortcut icon" type="image/png" href="' . get_stylesheet_directory_uri() . '/favicon.png">',"\n";
  echo '<meta name="theme-color" content="#303d4b">',"\n";
}
add_action('wp_head', 'add_favicon');

// backend favicon (for both login & admin)
function add_admin_favicon () {
  echo '<link rel="shortcut icon" type="image/svg+xml" href="' . get_stylesheet_directory_uri() . '/admin-favicon.svg">',"\n";
  echo '<link rel="shortcut icon" type="image/x-icon" href="' . get_stylesheet_directory_uri() . '/admin-favicon.ico">',"\n";
  echo '<link rel="shortcut icon" type="image/png" href="' . get_stylesheet_directory_uri() . '/admin-favicon.png">',"\n";
  echo '<meta name="theme-color" content="#de4736">',"\n";
}
add_action( 'login_head', 'add_admin_favicon');
add_action( 'admin_head', 'add_admin_favicon');

There’s a ton of different ways to use favicons, and my implementation may not even be the best or most current, but it works well for me.

I prefer icons that appear the cleanest, and in my opinion, SVG ICO PNG. I like SVGs because of their flexibility and scalability and how well they render. SVG favicons seem to give you a bit more room in the tab as well, for some reason.

I love the ICO format because I can pack in a bunch of different icons sizes into one icon file, and then I use it as a project folder icon for each project. I still use Microangelo for that. It’s an “old dog/new tricks” thing, I guess.

Dog Shitting