How To Use Your Gravatar as Favicon in WordPress
In this tutorial, I will show you how to use Gravatar as Favicon in WordPress as shown in the image below. The image shows that I am using my Gravatar image as Favicon.
A favicon (short for Favorite icon) is an image, most commonly 16×16 pixels, associated with a particular Website. The browsers typically display a page´s favicon in the address bar and next to the page´s name in a list of bookmarks and also in the browser tabs.
A Gravatar, short for Globally recognized avatar, is an image that follows you from Website to Website appearing beside your name when you do things like commenting in blogs or forums. It automatically associates your image with your email address.
Therefore, before you can continue with this tutorial, make sure that you have a Gravatar Account.
I will show you two different methods to use your gravatar as favicon in WordPress. Here are the methods…
Method1: Gravatar as Favicon :: functions.php
CODE-1 generates a Gravatar favicon for your WordPress blog.
Open functions.php file located in your theme´s folder, and add (copy and paste) the following CODE-1. Save the file and upload it to the server.
CODE-1 :: functions.php
<?php
/****************************CODE-1**********************************
* @Author: Boutros AbiChedid
* @Date: June 11, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: Method1 to generate Gravatar as favicon in WordPress.
* Code is only in functions.php file
* @Tested on: WordPress version 3.3.2
*********************************************************************/
function gravatar_favicon() {
//I am assuming that your admin email is the one registered with gravatar.
$hashed_email = md5(strtolower(trim(get_bloginfo('admin_email'))));
return 'http://www.gravatar.com/avatar/' . $hashed_email . '?s=16';
}
//wp_head action hook is triggered within the <head></head> section.
add_action('wp_head', 'favicon_link', 10);
function favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="'. gravatar_favicon() .'" />';
}
?>
CODE-1 Notes:
Line 12 of CODE-1: I am assuming that your “admin email” is the one registered with gravatar. Make sure that the account registered with gravatar matches the one listed in the “General Settings” of your WordPress dashboard (Settings->General).
CODE-1 works even if you already have the
<link rel="shortcut icon" … >tag in the head section of your theme´s header.php file. CODE-1 overwrites that link tag. But, if it exists, it is always better to remove it (or comment it out).If you are not using your email in the “General Settings” of your WordPress dashboard as your registered Gravatar email, then the default gravatar image will be resized and displayed instead of your personalized image. If you have a Gravatar account but it is not displaying as Favicon, make sure that your email address in the “General Settings” of your WordPress dashboard matches the one your Gravatar is registered with.
Line 13 of CODE-1: I set the size of the icon as 16×16 pixels (s=16), but you can have a different size if you like.
I personally, prefer Method1 (CODE-1) over Method2 below since this method is portable. Meaning a WordPress developer can add this code as part of the theme without hard coding an email address.
If Method1 still does NOT Work for your theme. Meaning that your gravatar image is not showing as your favicon, then make sure that
<?php wp_head(); ?>exists just before the </head> section of your theme´s header.php file. If<?php wp_head(); ?>does not exist, you could just add it just before the closing head tag.CODE-1 works on ancient WordPress 1.2.0 and higher. But I hope that you will upgrade to the latest version.
CODE-1 References:
Method2: Gravatar as Favicon :: functions.php & header.php
In this method, you need CODE-2 AND CODE-2a to generate a Gravatar favicon for your WordPress blog.
First: Open functions.php file located in your theme´s folder, and add (copy and paste) the following CODE-2. Save the file and upload it to the server.
CODE-2 :: functions.php
<?php
/****************************CODE-2********************************************
* @Author: Boutros AbiChedid
* @Date: June 11, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: Method2 to generate Gravatar as favicon in WordPress.
* For Method 2: You need CODE-2 (in functions.php) AND CODE-2a (in header.php)
* @Tested on: WordPress version 3.3.2
******************************************************************************/
function gravatar_favicon() {
//Calculate md5 hash(convert to lowercase(Strip whitespace in email from beginning and end))
//Executes from inside out.
$hashed_email = md5(strtolower(trim('boutrosabichedid@yahoo.com'))); /** Change the Email to YOURS. **/
//16 is the width and height in Pixels of the image.
echo 'http://www.gravatar.com/avatar/' . $hashed_email . '?s=16';
}
?>
CODE-2 Notes:
You can use either CODE-1 OR (CODE-2 & CODE-2a) but NOT both.
How do I get my Image displayed? The image is your Gravatar and is linked to your email address. If you don´t have a Gravatar account you can get one at Gravatar.
Line 13 of CODE-2: I used my email address. Replace my email with yours, the one registered with your Gravatar account.
Second: After adding CODE-2 to your theme´s functions.php file, copy and paste CODE-2a below in the header.php file. Make sure to place CODE-2a within your <head></head> section.
CODE-2a :: header.php
<!-- By BOUTROS ABICHEDID - Method2 to generate Gravatar as Favicon. Add in the <head></head> section. -->
<link rel="shortcut icon" type="image/x-icon" href="<?php if(function_exists('gravatar_favicon')) { gravatar_favicon(); } ?>" />
Why do you Wrap the template tag, gravatar_favicon(), inside an If Statement?
It is important to make it conditional. Otherwise, if gravatar_favicon() does not exist or there is a problem loading it you will get an Error message, and your Website breaks. However, by wrapping it in a conditional statement the WordPress Website loads without any errors.
CODE-2a requires CODE-2.
Your Turn to Talk
In this tutorial, I showed you 2 different methods to use Your Gravatar as Favicon in your WordPress Website without the need of a Plugin. One of them, should perfectly fit your needs.
If you have something to add, or anything else to say, please share it in the comment section. Your opinion matters, unless it is a Spam.
