How to Add a Favicon to WordPress in 5 Minutes

Look at the 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

And recently, it even started showing up in the Google search results!

Favicon Google

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

Watch the video

You can watch the video tutorial if you prefer that over the written blog post below:

Subscribe to the Compete Themes Youtube channel

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.

screenshot of the site identity section
Showing off the awesome Founder theme

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

Site Icon Setting

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.

Favicon Creator

Click on the “Generate from Text” button and you’ll be taken to a simple editor screen.

Favicon Text Editor

You can change the text, colors, font, and font sizes in just a minute to create your own image.

It won’t be the most professional image, but it will look nice. Not to mention, having a simple favicon image is way better than having no favicon at all.

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.

GIF of a favicon being added

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 on laptops, tablets, and mobile devices 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.

If you want to keep improving your site’s design, check out my article on design tips to make your website look better:

9 Simple Design Rules to Make Your Website More Beautiful

Enjoyed this post? Use the buttons below to share it with someone else.

Read these posts next

Want a more successful website?

Make your website a masterpiece with our FREE 7-day WordPress Email Course.

Invalid email address
Unsubscribe at any time.