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.
What is a 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).
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
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.
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.