Add Icon to Site Link in the WordPress Admin Bar

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.

			#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;
			}
		';
	}

}