A tutorial on how to add a favicon to your wordpress site

In today’s tutorial, I’ll show you how you can easily and quickly set or change a favicon on your WordPress site. Read on to learn how!

What is a Favicon?

It’s likely that you already know what a favicon is, as you’re want to either set or change your WordPress site’s existing favicon.

However, for those of you that don’t know, a favicon acts as your website’s badge on web browsers and in mobile device home screens. If you have a bookmark bar, take a look at it right now. You’ll see an array of favicons displayed next to your bookmarked websites.

A favicon is the small image shown next to your website name in a web browser URL bar or bookmark bar.

What are we waiting for? Adding or changing a favicon can be done directly in the WordPress admin panel.

Log in to your WordPress site to add a favicon.

Add a New Favicon Using WordPress Customizer

Once you have signed in to WordPress, look over at the left hand side menu (usually with a black background).

Click on Appearance > Customize

WordPress dashboard showing Customize menu item selected

You’re now looking at the Customize page in WordPress.

From here, click on Site Identity over in the left-hand menu. It’s the first link.

WordPress site identity showing how to change or upload a favicon.

Now, the page won’t change, just the menu. You’re now looking at the Site Identity page in WordPress.

From here you can change your WordPress site’s title and tagline, but we’ll leave that tutorial for another day.

Under Tagline is a section called Site Icon. That’s another way of saying WordPress favicon!

Click the Select site icon button under the Site Icon section.

WordPress Site Icon area showing how to choose a new favicon.

You’ll be looking at a popup window inside of WordPress, from which you can select or upload an image to act as your WordPress favicon.

A WordPress favicon is recommended to be 512 x 512 pixels. WordPress will scale the image down so it is the correct size when shown on your site.

Upload or Select an Image to Use as Your WordPress Favicon

Select or upload an image by dragging and dropping it inside of the window, then click the Select button in the lower right-hand corner of the popup.

WordPress media library and an image of a monster.

Once you have selected the image to use as your site’s favicon, the last step is to double check that you are happy with it from the preview window.

Once you are happy with the look and feel of your brand new favicon, click the Publish button in the top left-hand corner.

WordPress showing the new favicon.

Finally, let’s check to see that replacing or adding a favicon has taken effect. Load up a new browser tab or window and navigate to your site.

You may have to clear your browser’s cache or wait some minutes before you see any changes.

I saved my site to my bookmarks, so I could see the favicon displayed next to my WordPress site’s name. Like so:

A web browser showing a WordPress site with a favicon next to the name.

Conclusion

So there you have it! Simple, quick, elegant, and no plugins used as promised. That was how you can change or add a favicon to your WordPress site.

See you next time!


🚀 Follow My Journey from 0 to 100,000 Monthly Pageviews!

Starting with this brand-new blog, I'm sharing everything I do to get from 0 pageviews to 100,000 monthly pageviews, every step of the way.
Zero spam, just great content. Unsubscribe at any time.

💬 Leave a comment

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

We will never share your email with anyone else.