How To Add a Favicon in WordPress

Look at your browser tab right now.

See the image left of the page title?

That’s called the “favicon.”

Your favicon shows up in:

  • Browser tabs
  • Bookmark bars
  • Mobile apps

Needless to say, your favicon is a very important part of your website. That’s why in this tutorial, you’ll learn the easy steps to add your own favicon to your WordPress site.

How to add a Favicon with WordPress

The first step is to visit the Live Customizer (Appearance > Customize).

Inside the Customizer, click on the Site Identity section at the top.

In the Site Identity section, you’ll see an option at the bottom called, “Site Icon.”

This is where you’ll add your favicon, but before you move on you’ll need an image to upload.

Create your favicon image

WordPress recommends a square image that is 512px x 512px. If you know how to use a graphics editor like GIMP, Photoshop, or Sketch, you can create this image yourself.

If you’re not sure how to create the image on your own, then check out favicon.io. It’s a free site that will allow you to quickly create a custom favicon image.

When you download your favicon, you’ll get a zip file. There’s one image inside that is 512px – make sure to use that one on your site.

Once you have your image, you’re ready to upload it to your site.

Upload your favicon

Now that you have your image, return to the Site Identity section in the Customizer, and click the Select site icon button.

Press the Upload Files tab in the top-left corner, and drag-and-drop your favicon image into the popup. Once the image loads, press the Select button in the bottom-right corner.

If you upload an image that is not perfectly square, you will be asked to crop the image before you can select it.

Once you click the Publish button, your favicon will be added.

Admire your beautiful new favicon

Your site icon will immediately show up in browser tabs once published.

While there have been some useful plugins for adding favicons over the years, the WP team did a fantastic job integrating this feature into the Customizer. It couldn’t be easier these days.

• • • • • • • • • •

Leave A Comment

Your email address will not be published. Required fields are marked *