A favicon is a tiny square icon representing your website. It usually appears next to the website’s title in the browser tab. A favicon also shows up in your browser’s history, bookmarks, and any location where your website needs a visual identity.
This small detail is essential for your online identity. We will discuss the WordPress favicon and how to add one to your WordPress website.
Why Adding a Favicon to Your Site is Important
Favicon is basically your website’s ID; therefore it should be your own logo that appears up there. Ignoring its presence on your site is indeed a blunder.
Here are some reasons why a favicon is vital to your site.
Stands Out as Brand Recognition
Most users tend to open multiple tabs in their browsers. Without a favicon, you can only see the page or post name in the browser tab. Additionally, if you open more than 20 tabs, they get shorter, and it’s hard to identify which tab represents which site.
Having a favicon helps users spot each tab more easily. If your favicon stands out, it will enhance not only your visibility but also your user experience.
You will give your users a poor first impression if you don’t have a favicon. A website with no favicon doesn’t look professional.
If you make a website only for daily blogging, not having a favicon may be unimportant. But, it becomes essential when you run a company’s website or an online store.
Your visitors won’t trust any transaction on a website that doesn’t look professional.
Improve Mobile Experience
This is the era of the mobile experience. Having a responsive website might not be enough to delight mobile users, mainly because web-apps are on the rise right now.
Users can simply make a website bookmark on their phone’s home screen. No more URL-typing is necessary!
In this situation, having a well-made favicon will serve you in two different ways. First of all, the favicon will be used as the app icon and secondly – people using your web-app will memorize your icon. Therefore, your favicon will be associated with your website.
Creating favicon for WordPress
Usually, your favicon is your brand’s logo. For the image, WordPress recommends you to use a square, that’s 512px x 512px in size.
You may use a larger image, but WordPress will most likely ask you to crop it to fit the size.
To create an image that is exactly 512 pixels x 512 pixels in size, you can use any image editing software such as Adobe Photoshop (paid) and Gimp (free) or online favicon generators.
Although you can pick a background color for your WordPress favicon, transparency is more preferable. You can use .jpeg, .ico, .gif or .png file formats (just make sure to use the .png format if you use a transparent background).
After the image is ready, you can add that to your WordPress site using one of these three methods:
1. Adding a WordPress Favicon via WordPress Customizer
Starting from WordPress 4.3 version, you can simply add a WordPress favicon from your admin area. To get this done, follow the steps below:
Go to your Admin Dashboard
Hover your mouse over Appearance -> Customize
Choose Site identity
Click Select Image button under Site Icon section
Upload your favicon that has been prepared
Click Publish button to save the change
If you do the process properly, your favicon will appear next to your website’s title. To set this up on a mobile device, go visit your website from your phone and select Add to Homescreen.
Your favicon will now appear on your home screen.
2. Adding a WordPress Favicon to Site With a Plugin
You can also add a favicon to WordPress with the help of a plugin called Favicon by RealFaviconGenerator. It’s easy to use and offers more functionality. These are the required steps:
Go to your Admin Dashboard
Choose Plugin -> Add New
Type Favicon by RealFaviconGenerator in the search box
Install and activate the plugin
After activation, go to Appearance -> Favicon
Upload the image that you want to set as your favicon. You don’t need to edit your image using image editing software. The plugin will do it for you. Just make sure that your image is at least 70 x 70px in size. It’s even better if it is above 260 x 260 px.
Once you upload the image, hit the Generate Favicon button.
After you click the button, the plugin will take you to the RealFaviconGenerator website.
On the website, find and click Generate your Favicon and HTML code button.
The plugin will bring you back to your website. You will receive a notification that your favicon has been set up.
Check how your favicon looks in your browser and mobile device.
3. Adding a WordPress Favicon to a Site Manually
We recommend you to test this in your local development site first before it will go live.
Access your theme files via an FTP client or File manager
Find the /wp-content/themes/your-theme folder
Upload your favicon to your theme folder. It is recommended to upload it to a subfolder like Assets
Remember this file path
Find a file named function.php and add the following code
Dina is a digital content writer at Hostinger. Having years of experience in digital marketing and website creation, she seeks to help Hostinger users learn more about internet marketing and WordPress. When she is away from her keyboard, she likes to have short city tours and explore new local food places.