FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Separate favicons for the Frontend and Backend

Here's a nifty little idea I had that has some merit. Separate favicons for separate areas of a site. Basically, I can't live without Firefox or Chrome and the way they use multiple tabs.

favicon-tabs

I usually have several tabs open for a single site. Some tabs are in the backend, usually meaning WordPress administration area, and others are in the frontend, meaning the homepage or viewing a post. I'm constantly going back and forth between tabs, often to edit a post, and then switch to the preview of the post. Now, with 50 tabs open at one time, which isn't very unusual for me, it can become difficult to quickly spot which tab is which. Solution? Create 2 favicons. One for the frontend, and a different one for the backend! This makes it soooo much easier to quickly switch to the correct tab, and even though it's a fairly small trick/tip compared to most of the articles on this site, it's helpful enough that I wanted to put it out there for all you wonderful readers.

Separate favicons using WordPress

So there are many ways to do this, but probably the best is to just add a simple little function to your themes functions.php file.

Just add this to your functions.php file. Then you will need to create a favicon in your root folder where your wp-config.php file lives, and an admin-favicon.ico in your active themes folder where your style.css file lives.

View syntax-highlighted source.

<?php

function askapache_separate_favicons() {
    
    // default for frontend
    $favicon_uri = WP_SITEURL . '/favicon.ico';
    
    // if in backend change to the admin-favicon.ico file located in the active theme directory where style.css is
    if ( is_admin() ) $favicon_uri = preg_replace( '|https?://[^/]+|i', '', get_stylesheet_directory_uri() ) . '/admin-favicon.ico';

    // output the xhtml
    echo '<link rel="shortcut icon" href="' . $favicon_uri . '" type="image/x-icon" />';
    
}
add_action( 'wp_head', 'askapache_separate_favicons' );
add_action( 'admin_head', 'askapache_separate_favicons' );

?>

Raw Code 

';
	
}
add_action( 'wp_head', 'askapache_separate_favicons' );
add_action( 'admin_head', 'askapache_separate_favicons' );

?>

WordPress favicon PHP wordpress

 

 

Comments