Home  »  WordPress  »  Separate favicons for the Frontend and Backend

by comment

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


April 30th, 2013

Comments Welcome

My Online Tools
WordPress Sites

My Picks

Related Articles
Newest Posts

  • The Hacker Playbook - very nice high level overview of attacks 
  • Clean Code - A Handbook of Agile Software Craftsmanship 
  • Secrets of the JavaScript Ninja - By my absolute favorite JS hacker John Resig! 
  • Hacking Exposed 7: Network Security Secrets & SolutionsMy all time favorite, basic but thorough and accurate. 
  • Empty words will be no surrogate for cold resolve. Pain is nothing. 
  • REVERSING: Secrets of Reverse Engineering 
  • "The Shockwave Rider", by John Brunner (1975 hacker sci-fi) 
  • The Rootkit ARSENAL - Escape and Evasion in the Dark Corners of the System 
  • "We Are Anonymous - Inside the Hacker World of LulzSec, Anonymous, and the Global Cyber Insurgency" better be good! 
  • The Datacenter as a Computer -- Urs Holzle 
  • Now by Steven Levy, "IN THE PLEX" 
  • Dreaming in code.... So far, a little boring, but worth the read 

Friends and Recommends
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. See my article, On Hacking.
-- 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.

| Google+ | askapache

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

↑ TOPMain