Home » The Blog » WordPress » How to Further Your Brand with the Right Favicon

How to Further Your Brand with the Right Favicon

You are your brand -- so is your Favicon.

You've seen Favicons but may not have realized that is what they are called. Favicons are that little icon that displays when folks visit your site and add it to their browser's bookmark bar or list.

You may have even noticed that search engines are now including Favicons in the listing results when you search. They are also increasingly displayed on mobile and other platforms. That means it is time to use your Favicon to your advantage.

Here is what my bookmark bar in my primary browser looks like. At a glance, I know where each of those icons, when clicked on, will take me. These are sites I frequent quite a bit, and having them be just a click away in any browser window is very convenient.

My Bookmark Browser Bar with Favicons

Do you notice anything similar between all the Favicons above? All are clean icons representative of each site's brand. You may even recognize a few yourself.

Making sure that you have a Favicon in place, that when displayed, users know it is you is another way of contributing to your branding efforts. So let's get to it.

What is branding, exactly?

Basically, branding is a way of ensuring that your product, service, or business is recognized by consistently using the same visuals and style in everything you do. On and off-line. (I've talked about branding before here.)

For example, your logo is your primary brand identifier. But branding doesn't end there. Incorporating that logo, the colors, and the style throughout everything you do on your website and online marketing efforts is what “branding” is all about.

Back in the day, Favicon display required a special .ico file format and numerous sizes and versions to cater to every possible display size. Now, having a Favicon to represent your brand is easy to set up with only a handful of considerations.

WordPress has made it easy for you to add your Favicon since V4.3. All you have to do is go to Appearance > Customize > Site Identity > Site Icon. Once you create your Favicon in the recommended size of 512 pixels x 512 pixels, you upload it, and WordPress takes it from there.

Favicon Best Practices

When creating your Favicon at the size of 512 x 512 pixels, it is easy to forget that your Favicon will display in most cases at 16 x 16 pixels in search. That's a huge difference.

I see Favicons that are not legible, are not representative of the site they are attached to, and plain old don't make sense. Your Favicon is going to represent you and your business. This means if you chose an icon for your Favicon, that icon is on your website and is part of all your other marketing efforts.

Because of this, you want to test how your Favicon will display when reduced to that size. Here are the basic considerations when creating your Favicon:

WordPress Consultant Judith
My Favicon
  • Keep it simple—one icon or image.
  • Refrain from using words. Words are not readable at 16 x 16.
  • Avoid busy designs that will not be recognized at a glance.
  • Use your colors. You want your Favicon to match your overall site's look, feel, and logo colors.
  • View your finalized Favicon at the reduced size of 16 x 16 to make sure it is discernible.

Favicon = Your Brand

My Favicon reflects my initials, is in the same blue used on my site, and is easily recognizable at a glance. I also use this image on sites and platforms that offer the ability to upload a logo. This is how you build your brand to be recognized over time regardless of where you will be seen or what platform you are on.

Now can you see how having the right Favicon can make all the difference, right?

At your service,

Judith: WordPress Consultant and Business Coach