Set Different Favicons for Frontend, Backend and Login Page on WordPress

Print View Mobile View

Here’s another simple little hack for WordPress. This hack allows you to set different favicons for your frontend, backend and login page on your WordPress blog.

Different Favicons for Frontend, Backend and Login Page on WordPress

This may be useful, if you have many tabs of your blog opened at a time and are having difficulties recognizing admin tabs, or if you just need a different look.

So here’s what you need to add to the functions.php file of your theme.

function adminfavicon() {
echo '<link rel="icon" type="image/x-icon" href="http://YOUR-URL/favicon.ico" />';
}
add_action( 'admin_head', 'adminfavicon' );

This will set a favicon only for your admin dashboard.

For frontend and login page, create a similar function as above, replacing the favicon.ico url with another one, and add_action( 'admin_head', 'adminfavicon' ); with any of the following lines:

//Frontend
add_action( 'wp_head', 'frontfavicon' );
//Login Page
add_action( 'login_head', 'loginfavicon' );

You can also use the same code to set a single favicon for all three places by including them in the same function.

It’s also not necessary to use only .ico, you can use a png or gif image too.

<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/gif" href="/favicon.gif">

To create a favicon, you can use this.

11 thoughts on “Set Different Favicons for Frontend, Backend and Login Page on WordPress”

Comments are closed.