FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home  »  WordPress  »  Separate favicons for the Frontend and Backend

by 4 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.

favicon-tabs

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.

<?php

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

';
	
}
add_action( 'wp_head', 'askapache_separate_favicons' );
add_action( 'admin_head', 'askapache_separate_favicons' );

?>

Tags

January 30th, 2014

Comments Welcome

  • Calhoun Team Realty

    Nice article! Very helpful.

  • Sirus

    NIfty trick indeed! Thanks for sharing!

    Sirus

  • Stephen R

    Why bother putting the admin one in the Theme directory? Why not put them right next to each other in the site root?


Related Articles


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. See my article, On Hacking.
-- Richard M. Stallman









[hide]

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 | askapache

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

↑ TOPMain