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.
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 your WordPress website. It involves two steps which you can follow from below demostration;
Step 1 : 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.
Step 2 : Adding your favicon in WordPress
Since WordPress 4.3, you can add a favicon from WordPress admin area.
Follow the below steps to set favicon in your website.
3. Now a small window comes up where you need to select image button from site icon section.
1. Go to WordPress dashboard > Appearance > Customize
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 below illustration.
4. If you have followed steps 3 correctly then you will see a window as below illustration. Its WordPress image upload section. Upload your image from computer which you had created from Adobe Photoshop.
5. After successful image upload click on media library tab and select your favicon from the gallery.
6. Now in the final stage you need to click on publish button.
We have successfully added favicon to our 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 or catch me on Twitter.
Similar articles you may like
- How to add a cookie banner on your WordPress website
- How to add your WordPress site to Google Search Console
- How to get Rich snippets (Star rating) on Google search results