Use of favicon in WordPress site will give you more authority and enhance brand value compare to your competitor. In this article we will show you how to add favicon in WordPress.
What is favicon
Favicon stands for favorite icon and also known as page icon or an URL icon. It’s a small image placed in the left hand side of your website title. When a visitor opens a new browser or bookmarks your site, they can see it along with the title on the left hand side as shown below.
Many themes in WordPress support favicon. If you upload an image file then it will automatically cut the size to your requirement size.
Earlier many used 16X16 sizes in .ico format. Now all Modern browsers are supporting larger sizes with .png or .gif format. In this article we will show you how to use favicon in WordPress when your theme does not support it.
Create a Favicon
Before telling you how to use it in your WordPress site, you should know how to create it in the required size. Take any image in .png or .jpeg format and upload it to favicon.co.uk site (website link) to get your website’s favicon in the required format.
This website allows you to create favicon in 3 different sizes i.e. 16X16, 32X32, 48X48 and 64X64. To display your favicon in most of the browser like older versions of internet explorer, we suggest you to resize your image to 16X16 before uploading it to the site.
To create a favicon in .ico format please follow our below steps;
- Click on browse button and locate your image file from your PC.
- By selecting the image you have to choose one of the sizes that you preferred to be in your site.
- Now click on “generate favicon” to generate and download it for your PC.
Codes to be used for favicon in WordPress
To let the favicon work in your WordPress site, you are required to add two lines of codes in your header.php file. These lines must be placed between <head> and </head>.
<link rel=”icon” href=”http://www.sanabh.com/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”http://www.sanabh.com/favicon.ico” type=”image/x-icon” />
Obviously you have to replace “sanabh” with your own website address.
Now place your created favicon into your root folder and upload the header.php file to your theme folder. After refreshing your site, you can see it along with your website title.
How to use favicon in WordPress with a plugin
Plugin is a great feature in WordPress. If you do not want to use codes in your header.php file then use all in one favicon (website link) plugin in your WordPress site.
To get started, install and activate this plugin in your WordPress site. You will have an option of selecting “all in one favicon” in the settings section as shown below. After selecting it you will have options to upload your images to create your own favicon in WordPress.
Favicon not only make your blog more professional but also improves your site’s user experience and usability.