How to add a WordPress favicon to your website

WordPress favicons are a small and much overlooked branding opportunity when it comes to websites. These icons show up in browser tabs, browser bookmarks, and several other places like on mobile devices when a user saves your website to their screen. Take a look at your browser tab now and you will see the ThriveWP favicon icon.

Here is a video that will show you how to firstly create a favicon to add to WordPress then I will show you three ways to add it to your site.

How to Create a Favicon

The first thing you will need to do is create your icon in whichever image editing software you prefer. You may already have a logo that you can use which is fine, just bear in mind that Favicons need to be square.

Once you have your image you need to save it as a PNG file at ideally the size of 128×128 pixels.

Converting your image into a Favicon

Now you have the image you need to turn it into an ICO file. This is very simple, all you need to do is visit a site called Dynamic Drive. There you can upload your image and turn it into an ICO file.

Once you have uploaded your file the site will give you a preview of how your icon will look n the browser and an option to download the new ICO file.

Download this file and your ready for the next step!

Add a WordPress favicon to your website

All that is left to do now is add the icon to your website. You have three options here, you can upload it via your themes customizer, via a plugin or via FTP/file manager.

We would always advocate using the later as there is no need for a whole plugin and all the code that comes with it. It is also a safer option than using your theme settings. If you change theme then you will lose the icon but not if you have uploaded it via FTP.

Let’s look at each option

1 Via the theme customizer

Some themes actually support the upload of a site icon within the theme customizer if this is the case then great! All you need to do is go to Appearance > Customize then look through your options to find where you can add the icon (often this setting is added to the logo or header options). Remember though that not all themes support this.

Once you have found the option simply upload your icon image, with this setting it can be the normal PNG image rather than the ICO file.

2 Via the All in One WordPress Favicon plugin

The next option is with a plugin called All in One Favicon. If you don’t have the option in your themes customizer and don’t want to mess around with uploading the icon via FTP or a file manager then this is the next best option.

You will need to click on Plugins in your admin dashboard then click Add New. Then in the search box type All in One Favicon. The plugin should display, you can go ahead and install and activate it. Once activated you just need to hop over to the settings and upload your icon (don’t forget to click save!).

With this plugin, you actually get a few upload options. You can upload a PNG, GIF or ICO file. In addition, you can also add an Apple touch icon for mobile devices.

3 Add a Favicon to your site with FTP

This option is the one we use and would recommend, purely because you don’t need to add a whole plugin and all the code that comes with that just for a small ICO image. With this option, you will be uploading the ICO file to the root of your website.

The root of your website means the folder where all your website files and folders live. You can do this with an FTP program or a file management system like Cpanel or the file manager of your hosting service. Simply upload the ICO file the main root directory and you’re done.

Conclusion

You should now know how to add a WordPress Favicon to website. Please be patient as sometimes the icons will take a little while to display based on your browser cache and so on. If after several hours you are still not seeing the icon try clearing your browser cache or check back here to make sure you haven’t missed anything.