November 30th, 2007

Give WP-Admin a Custom Favicon

by John Kolbert as Tutorial/How-To | Tags: ,

Edit: This tip has been made into a Wordpress plugin! Get it here

I found an easy Wordpress trick that I think some of you may find useful. As I was writing an article for Simply-Basic.com the other day, I kept having to search through my 12-15 tabs that were open to find which one held my WP-Admin interface (I really should have just closed half of them). See, Wordpress’ back end doesn’t have a favicon associated with it, so it blends in fairly easily.

To fix this, I decided to give my Wordpress administrative pages a favicon. The process is amazingly simple. First, create a favicon or download my Wordpress-esque favicon (right click the image and select “Save Image As”). Upload this image to your server, keeping track of its URL.

Second, navigate to wp-admin/admin-header.php in your Wordpress directory. You can edit this file by downloading it, making the necessary changes, and re-uploading it. We are going to add the following line of code in between the <head></head> tags:

Code:

<link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" >

Make sure that you find a new line for this code. Be careful not to parse any PHP or <script></script> tags. If you uploaded favicon.ico to your main Wordpress directory, no changes are needed to this code. Otherwise, change “<?php bloginfo('url'); ?>/favicon.ico” to reflect your favicon’s actual location.

And that’s it, you’re done! It really is that basic! When you’re done you should get something that looks like the following:

8 Responses to “Give WP-Admin a Custom Favicon”

  1. I like for free favicon generator the genfavicon service.

    David Carrero Fdez-Baillo’s last blog post..Temas gratis para WordPress para el 30 de noviembre

  2. John Kolbert says:

    @David Thanks for the link! I hadn’t seen that service before, looks excellent.

  3. Jeffro2pt0 says:

    Hmm, seems like a nice trick. At first, I was wondering what you were talking about as I use the favicon that I attached to my blog as the means of differentiating between tabs but it looks like you are giving your wordpress backend an icon that is different from your actual blog favicon. Is that right?

    Jeffro2pt0’s last blog post..Human Tetris

  4. John Kolbert says:

    Right! I should have been clearer. This is a way for you to give your Wordpress backend it’s own favicon. In Opera, my backend administration only had the generic favicon that blended in with my other tabs, since it didn’t specify one. This is a way of giving it your own distinct style, totally separate from your actual blog’s, if you chose.

  5. Jeffro2pt0 says:

    I see. Now thats actually a useful tip. I always have a couple tabs open when I’m blogging.

    Jeffro2pt0’s last blog post..Human Tetris

Trackbacks/Pingbacks

  1. WordPress Weekly - Episode 1 » Jeffro2pt0.com
  2. Faviconize your WordPress admin | WordPressGarage.com
  3. Now you can add a favicon to your WordPress admin with a plugin | WordPressGarage.com

Leave a Reply