How To: Add a Favicon to Your WordPress Website

Like Google Analytics, a favicon is something that every website should have configured. There are a lot of plugins that “help” you add a favicon to your WordPress website. But I’m a big fan of not adding plugins where you don’t need to. And WordPress has custom favicon support built in!

Want the quick & easy version? Here’s a video showing you exactly how to add your own favicon to your WordPress website:

Videos not your style? Here’s a step-by-step tutorial.

Step One: Log In to Your Website

I feel like this is pretty self-explanatory. If you’re not sure how to do this, you probably shouldn’t be managing anything on your own website. ?

Step Two: Open Up the Customizer

You can access the WordPress Customizer in one of two ways. First, go to front-end (the public-facing side) of your site and click Customize in the admin bar.

Alternatively, you can also access it from the back-end (the WordPress Dashboard) by going to Appearance > Customize.

Step Three: Add Your Favicon

It really is that simple. Once the Customizer is open, you’ll want to go to Site Identity. By default, Site Identity lets you customize your blog/website’s name and tagline. Depending on your theme there may be more options here, too, like the ability to set a custom logo.

But the option we’re worried about is the section called “Site Icon”. For some reason, WordPress calls your favicon your “Site Icon”. I don’t know why, but it’s the same thing so let’s not worry about semantics.

Adding a favicon / “site icon” is as easy as clicking the Select Image button. This brings up the standard upload/select image box. You can either upload a new image or select one from your Media Library.

Depending on the dimensions of your selected favicon, WordPress may require you to crop it to fit properly. (My alternate logo isn’t 100% round, so it doesn’t fit into a perfect square. Fortunately, I don’t lose much by cropping.)

Once you’re all set, click the button in the bottom that either says Select Image or Crop Image. The media box will close and you’ll get a preview of what your new icon will look like in most browsers, as well as on mobile devices.

Not happy with how it looks? You can always click Change Image below the preview to select or upload a different image and try again!

Step Four: Publish Your Changes

This is arguably the most important step. While recent WP updates have made it so the Customizer will save drafts and revisions (the same way post drafts are saved), it’s important to click Publish at the top of the page to save your work.

Once you’ve published your changes, you should see your new favicon in the browser tab next to your website’s title. Boom! You’re done.

Troubleshooting

As always, sometimes caching plugins can affect changes to your website. If you don’t see the changes right away, you may need to clear your website’s cache and try again.

Some themes have custom favicon options built into them. I would suggest using the WordPress baked-in version, as it’s 1) probably less bloated and 2) cross-device. I strongly wouldn’t recommend using both as that could cause conflicts.