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

And in this post, you’ll learn how to add a favicon to your WordPress website.

Getting started…

Below we will discuss 3 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.

Over to you

There you have it – 3 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+