Skip to main content

Last updated: 19 December 2023

A favicon (also known as a “favourite icon”) is a small image or logo that represents your website within a website visitor’s browser tab, window, or bookmark list. It’s used to help website visitors distinguish your site from others, and it helps with brand recognition.

Before uploading your favicon to WordPress, you need to prepare it. Otherwise, it won’t display or WordPress won’t accept it.

The recommended size and format for a WordPress favicon are 512 x 512 pixels and less than 2MB (Megabytes). If you need a transparent background, the favicon should be in .PNG format.

Add A WordPress Favicon with the WordPress Customizer

This step by step guide is based on a newly installed WordPress site.

1. Log into your WordPress Website and visit your Dashboard

2. On the left-hand navigation pane, click on “Appearance and then “Customise”

3. Select “Site Identity”

4. At the bottom, select “Select site icon” which will bring up the WordPress Media Library

5. Upload your WordPress Site Icon.

6. Once you’ve uploaded your Site Icon click on “Select” to the bottom right.

7. If your Site Icon’s image dimensions is larger than 512 x 512 pixels you will be prompted to crop it.

8. Once you’ve cropped it, click on “Crop Image” to the bottom right.

9. Click on “Publish” and you’re done!

How Do I Change The Favicon?

Changing the favicon works the same way as adding it, but instead of choosing “Select site icon” you would choose “Change image”.

What If Your Favicon Isn’t Showing Up?

Caching issues are usually the problem and could come from either your WordPress Cache Plugin or your Web Browser (Google Chrome, Firefox, Microsoft Edge).

To see if it’s a browser cache issue, visit your website from a different browser (if you are using Google Chrome then use Firefox, or Microsoft Edge). If you see it is a browser cache issue, then clear your browser’s cache.

If it’s not a browser cache issue, then you need to clear the cache from your WordPress Cache plugin.

Tip – Favicon’s Display Differently In Numerous Browsers

Some users on both desktop and mobile use a dark theme on their web browser to browse the internet.

Ideally, you want a transparent background for your favicon so it can blend in with the majority of web browsers. But if you have a favicon with dark elements, it could “disappear” on some web browsers.

For example, from left to right:

  1. The favicon has black text and a transparent background. It looks fine on a default themed web browser.
  2. The same favicon doesn’t look right on a dark themed web browser.
  3. The last favicon has a white background to remain visible on a dark themed web browser.

I wouldn’t stress about this too much though. In general, it’s best to stick with a transparent background.