Hello Sunil
How to Add a Favicon to Your WordPress Website

How to add a Favicon to your WordPress website

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.

Google Play favicon on Google chrome
Google Play favicon on Google Chrome
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 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.

favicon illustration on Adobe Photoshop
favicon illustration on Adobe Photoshop

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.

Select customize from WordPress dashboard 
Select customize from WordPress dashboard

3. Now a small window comes up where you need to select image button from site icon section.

 

Select your image
Select your image

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.

Select site identity option
Select site identity option

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.

Image upload interface of WordPress
Image upload interface of WordPress

5. After successful image upload click on media library tab and select your favicon from the gallery.

Select your favicon from image gallery
Select your favicon from image 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.

Hello Sunil favicon
Hello Sunil favicon

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.

Favicon preview on WordPress customization panel.
Favicon preview on WordPress customization panel.

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

Was this article helpful to you?
[Total: 0 Average: 0]

 

Sunil Pradhan

Sunil is a front-end developer, illustrator and an online entrepreneur. He is the founder of "Hello Sunil" where he shares his love of technology with the world. He loves to write technical how-tos and tutorials. He is open minded and willing to explore beyond his knowledge.

7 comments

  • Hello ,

    I saw your tweets and thought I will check your website. Have to say it looks very good!
    I’m also interested in this topic and have recently started my journey as young entrepreneur.

    I’m also looking for the ways on how to promote my website. I have tried AdSense and Facebok Ads, however it is getting very expensive.
    Can you recommend something what works best for you?

    Would appreciate, if you can have a quick look at my website and give me an advice what I should improve: [URL Removed]
    (Recently I have added a new page about FutureNet and the way how users can make money on this social networking portal.)

    I wanted to subscribe to your newsletter, but I couldn’t find it. Do you have it?

    Hope to hear from you soon.

    P.S.
    Maybe I will add link to your website on my website and you will add link to my website on your website? It will improve SEO of our websites, right? What do you think?

    Regards
    Jan Zac

    • Hello Jan!

      Thanks for visiting my website. Currently my website is on early stage and I am busy these days to revamp my website. Previously I was using default WordPress theme but now I have switched to a custom theme. Thanks for showing interest to subscribe to my newsletter. I have disabled this feature for next one month but soon I will reintroduce with modern UI.

      I had visited your website. From my personal point of view. Your site is loading very slow which increases user bounce rate.

      As you asked for advice :

      “I’m also looking for the ways on how to promote my website. I have tried AdSense and Facebok Ads, however it is getting very expensive.
      Can you recommend something what works best for you?”

      First you need to create user base and master with user engagement. If you do not have readers and subscribes then you are wasting your time as well as money. The golden rule of thumb to promote your website is, write quality article which create magnetic effect on your user base. If your user base is happy they will start to promote your article automatically which save your time as well as money. Always focus on organic traffic rather then link changing method which is only temporary.

  • Hiya, I am really glad I have found this info. Nowadays bloggers publish just about gossips and web and this is really irritating. A good blog with interesting content, that’s what I need. Thank you for keeping this site, I will be visiting it.

  • Hello. I see that you don’t update your site too often. I know that writing articles is time consuming and boring. But did you know that there is a tool that allows you to create new posts using existing content.