Get fresh WordPress Content delivered in your inbox with warpspeed!

learn wordpress wplift wordpress rocket

Favicons are those little images that appear next to your site’s title in a browser tab, as well as other areas like bookmarks, app icons (on phones and tablets), and a few smaller places.

They’re a neat part of branding your site. Sure - your site won’t grind to a halt if you don’t have a favicon. But, it’s the little things that count when it comes to branding, and there’s no doubt that favicons add some extra memorability to your site.

Nowhere is this truer than tab hoarders - a group to which I definitely have a lifetime membership. I mean look at the screenshot below:

example of favicons

Which website is the most eye-catching in that tab mayhem? I think we can agree that it’s the site with a favicon.

In this post, I’ll show you a few different ways how you can add a favicon to WordPress to get that neat branding for your site.

But first, let’s take a quick look at how to create a favicon image, in case you don’t already have an existing image that you can use for your favicon.

How to Create a Favicon Image

When you create a favicon image, the only thing you need to adhere to is that the image should be a square.

There are technically some specific image formats that work better than others, but the methods I’m going to show you actually handle the image formats for you. So don’t worry about any technical details - just focus on creating a cool square image to use as your favicon.

Ideally, you want your image to be at least 512x512 px.

To create the image, you can always use an actual graphic design tool like Photoshop. Or, you can try something simpler like Canva. The easiest way is normally to try and work your logo into a square image of some type.

But...if you’re totally devoid of design talent (like I am), then you can always turn to a handy Favicon creator to help you out. Favicon.cc is a good option on that front.

Once you have a square image that you’re happy to use as a favicon, continue on to learn how to add your favicon to WordPress.

How to Add Favicon to WordPress With WordPress Customizer

Ever since WordPress 4.3, WordPress has had a built-in tool to help you add a favicon to your site. It’s tucked right into the WordPress Customizer and pretty much all you need to do is upload your image and you’re good to go.

This method is the absolute easiest way to get started with a favicon, but it’s not quite as thorough as the plugin method I’ll show you in the next section. With that being said, if all you care about is the favicon in the browser new tab rather than niche things like a Windows phone icon, you should totally feel free to use this method. It gets the job done.

To add your favicon to WordPress using the WordPress Customizer, get started by heading to Appearance → Customize:

Then, click on the Site Identity tab. Some themes may hide this area in a submenu, but usually, you can see this tab right away:

Inside the Site Identity tab, look for the Site Icon option and click Select Image to upload your favicon image:

how to add a favicon to wordpress with wordpress customizer

Once you click Select Image, you can either choose an existing image from your WordPress media library or upload a new image using the regular media library interface:

Select that image. Then, if your image isn’t already a perfect square, WordPress will force you to crop the image into a square:

Then you’re done! Just make sure to click Save & Publish to make your changes live.

How to Add Favicon to WordPress With RealFaviconGenerator Plugin

As an alternative to the WordPress Customizer, you can also use a free plugin called Favicon by RealFaviconGenerator.

I like RealFaviconGenerator because it gives you multiple formats for your favicon to ensure that your favicon works literally everywhere. For a casual site, you might not care about backward compatibility with older versions of Internet Explorer…

But if you want the absolute best coverage, this plugin is a good option because it creates both PNG and ICO versions of your favicon. Beyond that, it also covers things like MacBook Touch Bar icons and Windows Phone tiles.

It’s also super easy to use. To get started, install and activate the plugin. It’s free and listed at WordPress.org, so you can install it directly from your WordPress dashboard.

Once you activate the plugin, go to Appearance → Favicon to create your favicon.

To start, either upload a new image or choose an existing image from your media library.

Once you select an image, click Generate favicon to turn it into your favicon:

At this point, the plugin will redirect you to the Real Favicon Generator website. Don’t be alarmed  - this is supposed to happen.

On this page, you can manually configure some aspects of your favicon like backgrounds, shadows, and more. You don’t need to change anything - the defaults are fine. But if you want to tinker, this is where you can do it.

Once you’re done tinkering, click the Generate your Favicons and HTML code button:

After a few seconds of processing, the plugin will take you back to your WordPress dashboard. And that’s it! You’re done.

Don’t Want to Use the Plugin? Do It Manually

If you’d prefer not to use the plugin, RealFaviconGenerator also has a standalone tool that can help you create a favicon.

The tool generates the images and HTML code for you, so literally all you need to do is:

  • Upload the images to the root folder of your WordPress site.
  • Add the code from RealFaviconGenerator to your theme’s <head> section either directly or by using a plugin like Insert Headers and Footers.

If you’re comfortable uploading files via FTP and adding basic code snippets to your site, this method is pretty simple and lets you skip the plugin.

You can find the standalone RealFaviconGenerator tool at the website. Upload your image, configure it, then the site will give you a ZIP file of the images as well as the code:

Wrapping Things Up

Like I said, having a favicon won’t massively improve your site. But with how easy it is to add a favicon to WordPress, you really have no excuse not to!

Remember, all you need is a square image that you want to use as your favicon. Then, you can add it to WordPress using either the WordPress Customizer or the RealFaviconGenerator plugin or standalone tool.

If you have any questions about how to add a favicon to WordPress, leave me a comment and I’ll try to help you out!

Published:

Last updated on:

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.

3 thoughts on “How to Add a Favicon to WordPress With Customizer or Plugin

  1. Just wanted to tell you something: I stopped sharing your posts on Twitter because of the obnoxious floating bottom-bar ads. Floating bars are for interaction, not for making a few more hundred bucks. NOT. COOL.

    • Thanks for your reaction. Didn’t realize someone would be that upset because of the floating bar. It’s actually something I’ve been testing for several months now. At the old design, we’ve had it at the top.

      In my opinion, you can use the floating footer bar to:
      – show other blog posts
      – get more newsletter subscribers
      – communicate special offers/sale

      Will think about what I’ll do with it. I do appreciate the feedback.

Comments are closed.

Join 40,000 WordPress Astronauts
AND GET OUR LATEST CONTENT IN YOUR INBOX WITH WARPSPEED

We will never spam you.
close-link
siteground coupon
Get 60% Off the No. 1 WordPress Hosting!