A Quick Guide to Adding a Favicon to Your WordPress Site

Brand recognition is critical for a company's website. That's why you invest so much time coming up with a simple yet bold color palette, consistent imagery, and well-defined brand messaging. The more consistent you are in defining and establishing that identity across your site, the more ingrained it'll become in your visitors' minds.

But you know that it's not just what appears on your site that visitors, prospects, and customers remember you for.

Social media pages need to align with your brand identity; video branding does, too. It's not just these larger offshoots of your brand that matter either. Take your favicon, for instance. It's such a small detail—one that doesn't even occur on a web page—and yet there's a good likelihood your visitors will notice if you don't have one or if the one you've chosen doesn't look great.

It's this attention to detail when developing a consistent brand identity that will really drive home the idea that the company or individual behind this website has got it together. In other words, not only did you take time to create a small icon to maintain your brand's presence outside of the website, but you also considered how it affects UX, too.

If you've yet to create or add a favicon to your WordPress website, you've got to get on that, like, now. Or, better yet, yesterday.

Why Your WordPress Website Needs a Favicon

These are what favicons look like in the address bar and in browser tabs:

These are also favicons, this time in your bookmarks:

Here's another example of favicons you can find in a web browser's history:

Did you even realize your site's favicon got so much airtime?

Like I said, this is about establishing a clear presence of your brand on-site as well as off. Sure, a favicon is pretty small so it might not always get noticed, but no matter how far users deviate from your site, don't you want them to still have a piece of your brand they can instantly recognize?

In addition to bolstering your brand identity, favicons also help guide visitors back to you. If you create an eye-catching and unique favicon that helps users easily pick it out of a crowd of other favicons, they'll remember that.

How to Create a Favicon for Your WordPress Site

Follow these three steps to create a high-quality favicon and ensure that it displays correctly on all browsers.

Step #1: Design the Favicon

By this point, you should already have a logo for your website. Start there.

You then have a few different options for designing a favicon:

You can use whichever design program you're the most comfortable with (ideally, the one used to design your logo). Photoshop is one of the more popular options, but you can also use a free tool like Canva. Then extract a piece of the logo that's unique as well as memorable.

You can also create something completely new if you don't have a logo to work from. This Favicon tool is a good one to try.

Lastly, you can always download a free icon from the web until you have an official logo created for your site.

When creating a favicon, be sure to follow W3C's guidelines for sizing it. Basically, they recommend you design a favicon as a square, either 16×16 or 32×32 pixels. For colors, they recommend 8- or 24-bit.

Once a favicon is designed and ready to go live, you'll need to export the file either as an ICO, PNG, or GIF. These are the three most universally accepted favicon formats. That being said, ICO is the most versatile of them all as it stores various sizes and versions within the single file, so that each browser can determine which of those sizes is optimal for their purposes. If you're unsure of how to export to ICO, use this Favicon Generator.

Step #2: Add the Favicon to Your Site

There are three methods for adding a favicon to a WordPress website.

Option #1: Code

If you prefer to code the favicon into the backend, you can use this option.

Save your favicon file as "favicon.ico".

Upload it to the root directory on your server.

Update the HTML code in th element of your site. Here is the favicon code that all browsers will accept:<link rel="shortcut icon" href="http://yoururlhere.com/favicon.ico" />

Save your changes.

Option #2: Theme Customizer

This second option is available if your WordPress theme customizer allows for it (which most do).

Log into WordPress.

Navigate down to the Appearance tab and select Customize.

Find the Site Identity widget.

In there, you can define your site's title, tagline, and upload your favicon.

Save your changes.

Option #3: Use a Plugin

WordPress plugins let you do practically anything, so it shouldn't come as a surprise that they can do this, too.

The RealFaviconGenerator's WordPress plugin is my pick for easily generating and setting up a favicon for your site. It's rated 5-stars in the WordPress Plugin Directory and has 100,000 active installs, so it's pretty much guaranteed to work for you, as it did for me.

Step #3: Check the Favicon on the Front-End

As with any other work you do on your site, you should take a moment to verify that your favicon looks good when live. Use the RealFaviconGenerator to test it out on all major browsers. Once you're pleased with the end result, you should be good to go. There, wasn't that easy?

Wrapping Up

Want to ensure your brand is instantly recognized no matter where users engage with it? Create a clear and unique symbolic representation that you can add to WordPress. Then let the favicon serve as your stand-in no matter where people run into your website or its bookmark stand-in around the web.

Source: A Quick Guide to Adding a Favicon to Your WordPress Site