Each button in the Admin bar has a self-defining and space-saving icon. But the link to the blog frontend (which is represented as a blog title), has no icon. If you want, you can change it quickly – here is a small solution.

The following code belongs in the functions.php of the Theme, or better, in a Plugin. It adds the current favicon before the blog title. And to fit the image into the overall picture of the admin bar, we darkened it and and gave it a round shape.

* Plugin Name: Icon for Admin Bar Site Link
* Plugin URI: http://wpengineer.com/?p=2366
* Description: Add Icon to Site Link in the WordPress Admin Bar
* Version:    1.0.0
* Author: Sergej Müller
* Author URI: http://ebiene.de* License: GPLv3

// This file is not called from WordPress. We don’t like that.
! defined( ‘ABSPATH’ ) and exit;
// If the function exists this file is called as comments template.
// We don’t do anything then.
if ( ! function_exists( ‘sm_add_adminbar_site_icon’ ) ) {

// add to admin area, inside head
add_action( ‘admin_head’, ‘sm_add_adminbar_site_icon’ );
// add to frontend, inside head
add_action( ‘wp_head’, ‘sm_add_adminbar_site_icon’ );

function sm_add_adminbar_site_icon() {

if ( ! is_admin_bar_showing() ) {

echo ‘<style>
#wp-admin-bar-site-name > a.ab-item:before {
float: left;
width: 16px;
height: 16px;
margin: 5px 5px 0 -1px;
display: block;
content: “”;
opacity: 0.4;
background: #000 url(“http://www.google.com/s2/u/0/favicons?domain=’ . parse_url( home_url(), PHP_URL_HOST ). ‘”);
border-radius: 16px;
#wp-admin-bar-site-name:hover > a.ab-item:before {
opacity: 1;


Guest Post

This post is written by Sergej Müller wpseo.de, who created the popular WordPress Plugin to optimize your SEO.

Thank you very much from our part to Sergej.

If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!