Favicon or Site Icon is a small image or a Website icon that appears in the browser’s tab they display, next to the website name. Aside from that Favicons, are also used in your Bookmarks, Home buttons, and many other places.
The favicon will become your Brand (Website) image, and your visitors will recognize it. If you choose your site icon wisely, you can instantly stand apart from the Website’s Crowd, and enhance the User Experience (UX).
In this post first, I will cover the benefits of using the favicon on your WordPress Website. Then I will show you how to create it, and then we will add it to our Website in 3 easy steps.
1. Benefits of using a WordPress Favicon
As I said earlier, people will recognize your website by this little site icon. Look at this image.
All these favicons make it easier to identify the Websites. As the users open more tabs, this hides the Website titles. Using the Site Icon user can easily switch between the Sites.
Looking for the Top 50 Best Selling WordPress themes, of all time?
So, it also increases your site’s professionalism and helps create customer trust. And when users add it to the home screen, they can identify your Brand (Site).
2. How to create your WordPress Favicon
If you already have your site icon (you can use your brand logo), feel free to jump to the next section. If not, then continue reading this section.
You can use these online favicon generators.
- Favicon-Generator, you can create an icon from scratch or upload an existing one.
- Favicon.io lets you create favicon from the text if you don’t have a logo.
RealFaviconGenerator the one we will be using in this post. It lets you.
- Create app and site icons.
- Download the icon in PNG and ICO formats.
- Customize the image after uploading it.
To start creating your favicon, you will need to upload an image, Click on Select Your Favicon Image.
On the next screen, you can play around and tweak the settings and select what looks best to you. Once you’re done scroll, down the page and click on Generate your Favicon and HTML Code.
Next, download the Favicon images, click on the Favicon Package, and save it.
3. Recommendations on creating a WordPress Favicon
Let me give you some recommendations while you create your site’s icon.
- The size of the favicon should be 512*512 px.
- You should use a high-quality image as your favicon.
- Choose more enhanced colors.
- Select a unique icon as a Favicon.
- Use a perfectly square image or crop it before uploading it on WordPress.
- The Icon should look good when it’s size is decreased.
Following all these steps, you will ensure that your site’s icon looks good in every browser.
4. Adding a Favicon to your WordPress Website in 3 Easy Steps
Now you have your favicon, its time to add this to your WordPress Website.
1- Using the WordPress Customizer
The latest Versions (4 and up) of WordPress has a site icon feature that makes it easier to upload a Favicon to your site.
For me, I think it’s the quickest method for adding a Favicon to your WordPress Site.
To do this, go to Appearance–>Customizein your WordPress Dashboard.
It might look different in your theme. I am using the Astra theme I will first select Header–>Site Identity.
Just go to Site-Identity.
From here, Locate Site Icon choose Select Icon (or any option with which you can upload the image).
The default WordPress Media Library will open if you have already uploaded the image, select it, or upload a new one.
If you have used the RealFaviconGenerator and downloaded the Favicon Package make sure it’s unzipped.
After selecting the image, click on Select on the bottom right side.
You can Crop the image if it’s not a perfect square. And preview it from the right section.
Once happy, click on Crop Image from the bottom right side.
Choose Save & Publish. Don’t worry you, can always come back to alter this in the future.
2- Using a Plugin
Well, if you prefer the WordPress plugin to do the job. Install and activate the Favicon plugin by RealFaviconGenerator.
Once the plugin is activated, go to Appearance–>Favicon. Select, Choose From Media Library and upload the image. It should be 70*70 px (or 260*260 px).
After the image is uploaded, choose Generate Favicon from the bottom left.
It will redirect you to the RealFaviconGenerator page, scroll down and select Generate your Favicons and HTML code. After this, it will redirect you to WordPress Dashboard.
That’s it you are, all set to go now. You can preview the icons on different platforms.
Using FTP
If you are a person that prefers the manual type, you can also add your favicon using FTP (File Transfer Protocol), or File Manager if your host uses cPanel.
To follow along with this step, you need to create your Favicon image. For this, read the above guide.
I will be using the files I downloaded from the RealFaviconGenerator, but the procedure is the same for any tool you use.
Alright to get started, you need an FTP Client or the File Manager if its a cPanel.
Locate the Root Directory of your site and upload the zipped file that you downloaded (Favicons.zip) from the RealFaviconGenerator.
You should upload it where your wp-admin and wp-content folders are.
Then take the code RealFaviconGenerator provided you with earlier.
You then have two options either:
- Use a plugin Insert Headers and Footers.
- Or paste it in your theme’s head section i.e, by editing the theme’s header.php file.
Well, if you want to avoid any troubles when you update or change your theme, you should use the Insert Headers and Footers plugin.
First, install and activate the Insert Headers and Footers plugin. To use this, go to Settings–>Insert Headers and Footers and paste the code in Scripts in Header section.
Save the changes, and you are all set to go.
