9 March 2022
Looking for an easy way to add a favicon to your WordPress site?
The Favicon, or Site Icon, is a little image that appears in the browser next to your website’s title. It helps your users recognize your website, and more regular visitors will build an instant familiarity with that tiny image. This raises brand awareness and leads to trust among your target audiences.
In this post, we will show you how to add a favicon in WordPress in three ways.
As previously said, it builds the identity of your website. However, it also increases the usability and user experience of your website.
In most cases, users have many tabs open in their browser window. As the number of tabs increases, this hides the title of your website. The favicon helps users quickly identify your website and navigate to the tab they want.
Your site icon, or favicon, is also used when users add your site to their mobile device’s home screen.
Your favicon is usually your company’s logo. For the image, WordPress suggests using a square image with a size of 512px x 512px.
You can also use a larger image, but WordPress will probably ask you to crop it to fit.
Once the image is ready, you may use one of three methods to add the favicon to your WordPress site.
Once you have created your favicon, you’re ready to add that favicon to your WordPress site.
In the sections below, I’ll show you three different ways to add your favicon to WordPress. However, each method is a little different.
The simple way to add a favicon to a WordPress website is by using the WordPress customizer.
Go to Appearance » Customize and click on the Site Identity tab from your WordPress dashboard.
Next, click on the Select site icon button and upload the image you want to use as a site icon.
If the image you’re uploading is larger than the recommended size, WordPress will let you crop it. If it perfectly matches the recommended size, you may save your changes.
That’s all you can now preview your site and see your favicon in action.
Several plugins are available for favicon in WordPress, and one of the most popular free plugins is Favicon by RealFaviconGenerator.
This plugin provides more options for editing than the WordPress Customizer so that you can improve the compatibility of your favicon with various devices and app icons.
The first thing you need to do is Install and Activate the Favicon by RealFaviconGenerator plugin.
Upon Activation, go to Appearance » Favicon to create your favicon. Now, you need to select or upload an image by clicking the Select from the Media Library button.
After you’ve selected your image, click Generate favicon. When you click that button, the plugin will send you outside from your WordPress site to the RealFaviconGenerator website.
Once you’re done making those tweaks, scroll down and click the Generate your Favicons and HTML code button.
After that, the plugin will set up your favicon, and you are ready to go. You can view previews of how it will look on different devices in the plugin’s interface.
You can use code snippet if you don’t want to use a plugin or already have too many plugins installed.
You can also use the same RealFaviconGenerator tool to do everything manually.
The result is the same; you’ll need to manually upload the images via FTP and add some code to your site’s head section.
To get started, go to the RealFaviconGenerator website and select your favicon image by clicking Select your Favicon picture.
Here you will see the same screen which you see using the plugin method. Scroll down to the bottom and click the Generate your Favicons and HTML code button when you’re finished.
On the next screen, click the button to download your Favicon package.
Next, you’ll need to extract this package and upload it to the root folder of your site using FTP.
Make sure you put all the files in the root folder – this won’t work otherwise.
To finish things out, you’ll need to add the code snippet from RealFaviconGenerator to the head section of your WordPress theme.
There are several ways to do that, using a WordPress plugin Insert Header and Footer or adding the following code snippet to the active theme functions.php file.
/* Adds the favicon code snippet from RealFaviconGenerator */
REPLACE THIS LINE OF TEXT WITH GENERATED FAVICON CODE
Once you do that, you’re all finished, and your favicon should start working.
A WordPress favicon may help your website’s visitors have a better user experience by boosting brand recognition. Fortunately, you have several options to select from, making adding one simple.
I hope this post shows you how simple it is to add a favicon in WordPress. If you liked this post, you might be also want to read: