WPLounge
How to add a favicon to your WordPress site

How to add a favicon to your WordPress site

Do you want to add a favicon to your WordPress site? In this article, we’ll show you how to do this.

First, we’ll show you how to create a favicon. Then we’ll show you where to upload it so that the favicon will be shown to your visitors.

WPLOUNGE RECOMMENDS..
Divi theme & Divi Builder
Elegant Themes is selling more than
85 premium themes (including Divi!) for only $89!
Check Elegant Themes »
The links above are affiliate links.

What is a favicon?

Favicon of WPLounge
The favicon

A favicon is a small icon that is typically shown in the address bar of your browser. The icon will not only be shown while browsing a website, it will also be shown in your bookmarks bar when you bookmark a website. Most websites choose to have a small, recognisable version of their logo.

How to create a favicon

To create a favicon that can be used in WordPress, it’s best to create a square image of at least 512×512 pixels. Typically, you would use an application like Photoshop to create such icons. However, it is perfectly fine to use another application.

Use PNG for a transparent background

I highly recommend using PNG for your favicon. Logos often look sharper when using a PNG rather than a JPG. Furthermore, a PNG can have a transparent background. By using a transparent background, you’ll make sure that your favicon looks good in every browser. The image below (of our Dutch website) shows a clear example between using a white background (left) or a transparent background (right).

Favicon PNG or JPG

As you can see, the JPG favicon on the left has a white background and therefore looks less appealing than the PNG version (with transparency) on the right. It’s just a small detail, but it looks much more professional.

Adding the favicon to WordPress

Favicon WordPress CustomizerNow that you’ve created your favicon, it’s time to upload it to WordPress. For this, you’ll need to open the WordPress Customizer. You can find the Customizer by going to Appearance > Customize.

Once you’re in the Customizer, navigate to Site Identity. You will find a few options here, including the option to change your Site Title and Tagline (also found under Settings > General).

Underneath, you will find the Site Icon option. This is where you upload the favicon image you have created. Once you’ve uploaded the image, a dark background will be shown. This has to do with the transparency. Ignore this and look at the example on the left; if your favicon looks good there, you’re good to go! Just hit the “Publish” button in the top right of the Customizer and your favicon will be saved.

If your favicon isn’t working

In some cases, your favicon may not work after adding it to the Customizer. This is typically caused by your theme. Some themes have an option to upload a favicon, because in the good old days WordPress did not support favicons by default.

Conclusion

You don’t need an awful lot of technical know-how to add a favicon to your WordPress site. Just make sure to use a PNG image, so that you can have transparency.

Wouter Postma

Co-owner of WPLounge.nl, the biggest Dutch blog about WordPress.

Comment