Different Favicons For Backend And Frontend

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

Comments are closed.

11 comments

  1. Stephan

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

  2. Alex

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

  3. Randy

    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

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

  5. Michael

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

  6. Randy

    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

    Good idea and useful, thx for it!

  8. Alex

    Welcome David 🙂

  9. favicon generator

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

2 pingbacks

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