WordPress: Admin area favicon

Sometimes I notice that the admin area of WordPress isn’t loading the favicon I’ve uploaded to the root of the site, or in other cases I find it useful to have a slightly different favicon for the admin area compared to the front-end of the site – when you’ve got a lot of tabs open in your browser and are working on multiple client sites at the same time, having extra visual indicators on each tab is quite useful!

Fortunately, there’s an easy way around this. Open your theme’s function.php file and add the following code.

Fix your admin favicon

function pa_admin_area_favicon() {
$favicon_url = get_bloginfo('url') . '/favicon.ico';
echo '<link rel="shortcut icon" href="' . $favicon_url . '" />';
}

add_action('admin_head', 'pa_admin_area_favicon');

Obviously you’ll need to update the $favicon_url variable so that it matches the your site settings, and if you want a different favicon showing up in the admin area, then change the .ico filename.

Favicon still not showing up?

If you’re still having issues with your favicon not appearing or not changing, it might be that your browser has cached the old favicon.

Here’s a simple trick for fixing your favicon if it’s not showing up, or is still showing the old favicon:

Update the favicon url from:

example.tld/favicon.ico

to

example.tld/favicon.ico?v=2

Please note that this above trick isn’t just for WordPress users, but works on any website. The trick is that it makes the browser think that a new favicon location is being loaded, forcing the browser to load the favicon from the server instead of its local cache. And if you change your favicon again, just change the version to 3!

Comments