A favicon also known as favorite icon or site icon is a small tiny image which are used by web browsers to show a graphical representation of the site being visited at the left side of the browser’s address bar.
Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Also, it is used as application icon of mobile device.
If you are curious about its history how it got its name then let me tell you its short history.
The word favicon has two words “favorite” and “icon”, and it was named as such because it was first supported by Microsoft’s Internet Explorer 5.
It’s bookmarking feature was called as favorites and from there it got its name favorite icon or in short favicon.
The main reason to have a favicon is the obvious improvement in user experience.
In today’s article we will learn how to create and add a favicon on WordPress website. It involves two steps which you can follow from below demonstrations.
How to create a favicon?
Open any image editing software like Adobe Photoshop and create a canvas of
512 x 512 pixels. Put your own creativity while creating a favicon which reflect your brand identity of website.
You can use transparent image or fill the image with any background color like black, green of your choice. This image could be in PNG, JPEG or GIF format.
Below is an illustration of our website favicon (old icon used by us).
Adding favicon on WordPress
Since WordPress 4.3, you can add a favicon from WordPress admin area.
Follow the below steps to set favicon in your website.
Step 1: Go to WordPress dashboard -> Appearance -> Customize.
Step 2: You will automatically redirected to customization panel. Where you have multiple options for your site customization.
You need to click on site identify option as illustrated.
Step 3: Now a small window open up where you need to click on select image button.
Step 4: If you have followed steps 3 correctly then you will see a window as follows.
Its WordPress image upload section. Upload your image from computer which you had created from Adobe Photoshop.
Step 5: After successful image upload click on media library tab and select your favicon from the gallery.
Step 6: Now in the final step you need to click on publish button.
You have successfully added favicon to the WordPress website. Refresh your homepage and check on your title bar of your browser.
If you have followed every steps carefully then you can expect the desired result as below illustration.
Some say that great things come in small sizes, and I think that applies to favicon as well.
It is one of those little things that we usually don’t pay too much attention to, but the truth is that far from being insignificant, they are a very important part of the web, both from a user interface perspective and a branding point of view.
I hope that this article helped you add favicon to your WordPress site. For questions and feedback you can leave a comment below.
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?