Dark Mode On / Off

How to Add a Favicon in WordPress Site?

How to Add a Favicon in WordPress Site? 1

A Favicon is a tiny image that appears next to your site title in the browser. Although small in size, Favicons are used to represent your site or brand effectively. WordPress Favicon is not just limited to displaying in the browser’s tab. It is also used for bookmarks and windows tiles.

In this article, you can learn about Favicon and its importance, how to create a Favicon, and add Favicon on your website.

What is Favicon?

Favicon is a tiny square icon representing your brand or site. If a Favicon is set correctly, it appears next to the site title in the browser. Besides, browsers also use it in different locations like bookmarks, address bars (next to the URL), and others.

How to Add a Favicon in WordPress Site? 2
Favicon in the browser

In WordPress, a Favicon is also known as “Site Icon”.

Why should you add a Favicon in WordPress Site?

As mentioned earlier, it establishes your site’s identity. Having a Favicon helps users to spot your website and improves the site’s usability and user experience. For example, most users usually open too many browser tabs. As the number of tabs increases, the website title hides, but the Favicon remains visible. It helps users to identify your website and return to your article quickly.

Besides, it is the era of smartphone devices. Users can bookmark your site to their phone’s home screen. In such a situation, the Favicon is used as the app icon. The users using your web app will also memorize your icon. It establishes your visual identity and helps strengthen your brand.

How to Create a Favicon for WordPress?

Usually, you use your site logo as your Favicon. For Favicon, WordPress recommends you to use a square image of 512px both in width and height. 

Although you can use a larger image or rectangle one, WordPress will ask you to crop it to fit the size.

There are different ways to create a Favicon. You can use image-editing software like Adobe Photoshop(paid), Adobe XD(free), Photopea(online), or use online Favicon generators.

How to Add a Favicon in WordPress Site? 3
Designing Favicon in Photoshop

For background, you can pick your favorite color. But transparency is preferable. You can use .jpg, .png, .gif or .ico file formats for your Favicon. If you want to use a transparent background, make sure the file format is .png.

After the Favicon is ready, you are prepared to add to your WordPress site.

Adding Your Site Icon or Favicon in WordPress

Since WordPress 4.3, all WordPress sites include a site icon or Favicon feature. It makes it easier to upload and crop an image in the media uploader.

Follow the below steps to add the Favicon to your website:

  1. Navigate to Appearance > Customize from your WordPress Dashboard.

    How to Add a Favicon in WordPress Site? 4
    Customizer Settings
  2. From Customizer, go to the Site Identity tab.
  3. Under the Site Identity panel, you will see the Site Icon section. Click on the Select Image button.

    How to Add a Favicon in WordPress Site? 5
    Site Identity Panel in WordPress
  4. Upload the Favicon and click on Select.
  5. Now, crop the image if necessary. Otherwise, click on Skip Cropping.

    How to Add a Favicon in WordPress Site? 6
    Cropping Favicon in WordPress
  6. Finally, click on the Publish button and refresh your site.
How to Add a Favicon in WordPress Site? 7
Favicon in WordPress Site

If you ever want to change the Favicon in the future, you can come back to this section and click on Change Image.

Final Thoughts

Often most users underestimate the importance of Favicon and don’t add to their site. Having a Favicon is a must! A Favicon represents your site and provides recognization. If you haven’t added till now, go ahead and add it now.

I hope this article helped you add a Favicon to your WordPress site. Please feel free to let me know if you have any questions or feedback in the comment section below.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recommended Articles