Home » WordPress » Separate favicons for the Frontend and Backend

by 3 comments

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.

Separate favicons for the Frontend and Backend

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.


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


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



Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

My Online Tools

Popular Articles
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two.
-- Richard M. Stallman

It's very simple - you read the protocol and write the code. -Bill Joy


Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | |

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service | @Htaccess

↑ TOPMain