Different Favicons For Backend And Frontend

May 18th, 2009 by Alex • WordPress Hacks • 11 Comments

Do you have the same problem? We all have a lot tabs open, especially of our own blogs and all tabs look the same, since there is the same favicon for backend and frontend in your tabs. It can be annoying to click around to find the admin tab between all the opened tabs of some posts of your blog. As you can see on this screenshot:

favicon-wpengineer

A little hack in your functions.php of your theme can help you with this problem:

/* Different Favicon for Backend */
function favicon4admin() {
 echo '<link rel="Shortcut Icon" type="image/x-icon" href="' . get_bloginfo('wpurl') . '/wp-content/favicon.ico" />';
}
add_action( 'admin_head', 'favicon4admin' );

In this case we put the admin favicon in our wp-content folder. Done!

favicon-wpengineer2

It can be a little helpful hack for your daily work. Of course, the text in the tabs are different most of the time, but not always, and a different looking favicon is more visible.

An easy tool to create a favicon is available at dynamicdrive

9 Comments
  1. Stephan says:
    May 18, 2009 at 6:40 pm

    sooo simple, but soo great ;-)
    another easy favicon-generator can be found at http://www.favicon.cc

  2. Alex says:
    May 18, 2009 at 8:24 pm

    Thanks Stephan for the link, sometimes even simple things are worth to mention :)

  3. Randy says:
    May 19, 2009 at 2:59 pm

    I recommend John Kolbert's "Admin Favicon" plugin for setting this up without modifying any code: [http://www.johnkolbert.com/portfolio/wp-plugins/admin-favicon/]. I use this for every new WordPress web site I build.

  4. John Hoff - WpBlogHost says:
    May 20, 2009 at 7:50 am

    That's a really nifty little trick. Very cool and stumbled!

  5. Michael says:
    May 21, 2009 at 12:26 pm

    Randy, a plugin is a bit overloaded for that little piece of code ;)

  6. Randy says:
    May 21, 2009 at 5:37 pm

    Michael, Yeah, you are probably right. Though for some users I expect adding any code to the functions.php file might be overwhelming.

    The trouble with putting it in the functions.php file is that it is tied to the theme instead of to the WordPress installation: you can't upgrade your theme without overriding the changes, and you can't change the theme without duplicating the code. I imagine both options have their place.

  7. David says:
    May 29, 2009 at 12:42 am

    Good idea and useful, thx for it!

  8. Alex says:
    May 29, 2009 at 5:17 pm

    Welcome David :)

  9. favicon generator says:
    August 13, 2009 at 12:22 pm

    Simple but effective idea :) Especially when used in chrome browser for me

2 Pings
  1. Links XLVIII • Peter Kröner, Webdesigner & Frontendentwickler
  2. Bing, Googles Untergang, Impressums-Tipps und mehr > News, Tipps > Selbständig im Netz
WP Engineer Tags