One often neglected aspect of websites & online branding comes in the form of a favicon. A favicon is that small little image displayed in your browser’s tab. It helps you:

  • Establish your visual identity online
  • Improves user experience
  • Helps strengthen your brand

Getting started…

Below we will discuss 4 methods of adding a favicon in WordPress.

The first method will require a square image that is 512×512 pixels. This should be easy enough to create if you have a logo for your website. And it’s the easiest method by far.

This option has been available since WordPress version 4.3, but if you have an older version for whatever reason, you will want to use one of the last 3 methods.

Here’s what to do if you don’t have version 4.3:

First you need to create a 16×16 or 32×32 .ico file. Sadly, most image editing programs do not support saving in .ico format directly so you will have to create a .png image first.

After you have created your favicon, you need to convert it to the proper format. There are many favicon makers online which make the process easy and painless.

The most notable ones are: Faviconer and Dynamic Drive Favicon Tools. All of them are free and do an excellent job of creating the favicon in .ico format.

When you are ready, all that’s left to do now is to add the favicon to WordPress. I will walk you through each method step by step.

Method 1: upload your logo via the WordPress Customizer

This is now the recommended method for adding a favicon in WordPress. And it’ll be available providing you have WordPress version 4.3 or later.

It’s the fastest and easiest method by far.

You will need a 512×512 pixel image to upload and you won’t have to bother converting it into .ico format – awesome!

First access the WordPress Customizer by going to Appearance > Customise:

WordPress Customizer

Now the next step may vary slightly for you and I’ll explain why in a second.

For most themes you should navigate to the menu option which says Site Identity:

Site Identity

In some themes, this option will say something different to Site Identity.

I’ve seen it called:

Site Title, Tagline and Logo or Site Logo & Header (this last one was under another menu called General).

No matter what, the option should look similar to one of those above.

Next, you’ll get the option to upload your site icon/favicon:

Upload Site Icon

Once uploaded, click Save & Publish – then you’re all done.

You may need to clear your site cache if you are using a caching plugin, along with your browser cache. But that’s it!

Method 2: uploading the favicon through your theme’s options page

upload a theme

More and more themes today are shipped with plenty of options – some of them even include the option to upload your own favicon. Naturally, the first place to look is your theme’s options page. If you have the option to upload a favicon image – great!

Simply upload the created image and you’re done. Make sure to save the changes and refresh the page. Your favicon should be there. If you can’t see it, make sure to clear your cache – that should take care of the problem.

Method 3: using a plugin

plugin

If your theme doesn’t support this option, the second easiest method is to add a favicon with the help of a plugin.

Favicon by RealFaviconGenerator

This plugin allows you not only to upload a favicon to your site, but to generate it as well, from an image previously uploaded to your media folder and goes a step further to ensure your favicon looks great no matter which device your site is viewed on.

Favicon Rotator

Favicon Rotator makes adding a favicon a breeze – simply upload the favicon from Theme > Favicon menu and it will show up on your site. You can add multiple images and display a random favicon to your visitors.

All In One Favicon

With All In One Favicon, you can upload your favicon and it even supports the icons for Apple Touch Devices.

Method 4: adding the favicon manually

manually

Note: the following method involves editing code. We recommend backing up any files before hand or using one of the previous methods if you’re not comfortable doing so.

The third method requires you to insert a small line of code in your theme’s header.php file, or alternatively into your functions.php file.

Some say it’s better to add it to your functions.php file because it replicates a plugin functionality, while adding it to your header.php file is too theme dependent. In either case, I recommend making the changes via child themes which means we will be adding the code to our functions.php file.

To do this first, you have to upload your favicon to your web server, either via FTP or Cpanel if your host is using it. When it comes to uploading the favicon it is recommended to upload it to the root directory as well as your theme folder. Make sure to delete old favicons if they are present. By doing this, you basically ensure that your favicon will appear in your subscriber’s feed readers.

After you uploaded the image it’s time to add the necessary code. Open up your functions.php file and paste this bit of code in:

function my_favicon() { ?>
<link rel="shortcut icon" href="yourimagepathgoeshere" >
<?php }
add_action('wp_head', 'my_favicon');

This function will add the favicon in the appropriate place between the <head></head> tags in your theme header.

Bonus: add your gravatar as a favicon

gravatar

Struggling to come up with favicon design? WP Snippets has an interesting solution. Be different and creative and use your gravatar as a favicon!

The process involves creating the function in your functions.php file and then linking to it from your header file. This option is also nice because it can be a unique way to brand yourself and establish your online identity.

Paste this code into functions.php; replacing the email address with your own – make sure it’s the one you use for Gravatar!

function GravatarAsFavicon() {
//We need to establish the hashed value of your email address
$GetTheHash = md5(strtolower(trim('you@yourdomain.com')));
echo 'http://www.gravatar.com/avatar/' . $GetTheHash . '?s=16';
}

Save the file and then open up your header.php file and add this line of code:

&amp;amp;amp;lt;link rel=&amp;amp;amp;quot;shortcut icon&amp;amp;amp;quot; href=&amp;amp;amp;quot;&amp;amp;amp;lt;?php GravatarAsFavicon(); ?&amp;amp;amp;gt;&amp;amp;amp;quot; /&amp;amp;amp;gt;

Over to you

There you have it – 4 easy ways to add favicon in WordPress and a bonus tip for turning your Gravatar into a favicon.

This will help to give your website a professional look and improve your branding which is awesome.

And even when people have loads of tabs open in their browser, yours will stand out because of your new favicon!

Posted by Ana Lynn Amelio

Ana Lynn Amelio is a WordPress designer and freelance blogger. When she isn't busy running her own small business Ley Design she can be found reading, enjoying Italian food, and helping her kids go through not-so-secret cookie stash. Follow her on Twitter or say hi on Google+