fbpx

WordPress Favicon: Everything You Need To Know

Table of Contents

Looking for a WordPress Favicon guide?
In this article, we will go through all the topics related to WordPress favicon and understand how this small favicon is important for your WordPress blog.
It can very well seem that a small picture that shows up on the tab of your browser is not that important.
I, however, suggest otherwise. WordPress favicon is very important in many aspects. And no it’s not only for branding but there are also many SEO related aspects to a WordPress favicon.
So without any further delay let’s get started.

What Is A Favicon?

A favicon is defined as an icon associated with a particular website, typically displayed in the address bar of a browser accessing the site or next to the site name in a user’s list of bookmarks.

The purpose of favicon in 1999 was to show if the website was bookmarked or not. This inturn was measured by website owners by the number of favicon requests it was getting. However this is no longer applicable for modern browsers. 

Where Is The Favicon Displayed?

Favicons are displayed in various locations according to the user’s actions. Primarily they are displayed in the top left side beside the website name in the browser tab.

If a site is bookmarked it also appears in the bookmarks toolbar and the bookmarks folder. Websites can be added to the smartphone home screen and the icon that is shown is the favicon of the website. 

Similarly when you pin a website in Windows or Mac, the displayed icon is the favicon used on your site.Recently

Google announced that they will start showing favicons in search results to improve user experience and aid them for the future plans.However Google received a lot of backlash over this and then they started to try with different layouts on the desktop version

But you can see the favicon in search pages when viewed from a mobile or a tablet.

Why Is A WordPress Favicon Important?

A small favicon can have a tremendous effect on your blog in terms of attention-grabbing ability and also helps the blog in ranking higher on SEO.

Here are the benefits of having a WordPress Favicon

  • Your favicon helps users quickly identify your site when they scan through search results.
  • A good looking favicon, helps increase CTR (Click Through Rate)
  • Your blog can be easily identified from the users bookmarks
  • Increases credibility and trust among your readers

What To Use As A WordPress Favicon?

WordPress favicons are an important part of your brand identity. So when choosing the right WordPress favicon, it has to resonate with your site or blog.

Listed below are ideas which you can use as your Favicon.

Use Your Logo As A Favicon

The best option for a favicon is to use your site’s logo. It fits perfectly with your brand and makes it easy to identify your website or blog with the favicon

The First Letter As A Favicon

Another great option is to use the first letter of your brand as the favicon. It doesn’t quite help the branding aspect but surely the minimal look will create a good aesthetic feel for your blog.

Using Emojis As A Favicon

An emoji is a favicon? Completely crazy right. It increases the fun factor while also being emojis they increase the attention-grabbing ability of a favicon.
To use an emoji as a favicon, you can go to this article by CSS TRICKS

Use Icons As Favicons

Icons in a way are similar to favicons, as they both are used as a tool to represent the information in a graphical manner. Icons8 and FlatIcons are great places to get access to thousands of free icons.

How To Design A Favicon?

A favicon has to be the right size and in the right format. Various platforms like android, ios etc need different sizes and formats.

Now since we are going to use it on a WordPress site, any site that uses WordPress 4.3 and above a png or jpeg file with dimensions of at least 512px is recommended. You can use tools like Photoshop or Canva to design your favicon.

  • Save

For WordPress version 4.3 and below you will need an .ico file and two 16 x 16 px or 32 x 32 px files. And since most photo editors don’t allow you to save in .ico files you will have to use favicon generators to get the job done. 

The most popular one is favicon-generator.org. Simply upload a PNG / JPG / GIF file and let the website do its magic. Once you have the required files you can use the methods I have shared below.

Another great resource to design your own favicon is favicon.io/. Here you can generate favicons from text, images and even use an emoji for your WordPress favicon.

How To Upload Favicon In WordPress

Using a custom Favicon is very easy in WordPress. Depending on the WordPress version and the method you prefer, there are three simple ways of uploading a favicon to a WordPress site.

  • Using the WordPress Customizer
  • Upload WordPress Favicon Using WordPress Plugin
  • Manually uploading the favicon

Using The WordPress Customizer

If you are using WordPress version 4.3 and above you can directly use the built in WordPress Customizer to upload the favicon.

To check your WordPress version, log in to the WordPress dashboard and check the bottom right corner.

  • Save

Now that your WordPress version is above 4.3 we can use the customizer to upload the favicon.

Use WordPress Customizer To Upload Favicon

STEP 1:
From the left sidebar in WordPress sidebar, go to Appearance > Customizer. Now depending on which theme you are using, you will have to find a setting called Site Identity.

In Astra Pro, Site Identity is under Header > Site Identity. 

  • Save

STEP 2:
Once in site identity, you simply have to upload a png or a jpeg file with a recommended dimension of 512px (square pic) under Site Icon.

  • Save

Click on the Publish button and you are done!

Upload Favicon Using WordPress Plugin

WordPress users of all versions can use a WordPress plugin called Favicon by RealFaviconGenerator to upload custom WordPress favicons.

  • Save

STEP 1:
Go to your WordPress dashboard and from your left sidebar, navigate to Plugin > Add New and search for Favicon by RealFaviconGenerator.
Install and activate the plugin.

STEP 2:
Now navigate to Appearance > Favicon.
On the next screen, it will ask you for a master image. The minimum size is 70 x 70 pixels and a recommended size of 260×260 pixels.
Upload or use your favicon image from the media library and click on “Generate Favicon”

  • Save

STEP 3:
Next, you will be redirected to a website where you can make changes to the way your favicon will look on various platforms.

The favicon can be customized for the following platforms,

  • Save

STEP 4:
Once you are happy with the settings, click on the Generate button.
That’s it!
You will be redirected to the WordPress dashboard with an overview of how the favicon will look like.

CAUTION: To keep the plugin lightweight, the developer has insisted to keep the plugin active or else the favicons will get disabled.

Manually Uploading The Favicon

If you are the developer type and would like to take control of your site then this manual method of uploading WordPress favicon is for you.

Requirements To Upload WordPress favicon manually,

  • Image to be used as a favicon
  • Access to File Manager via Cpanel or FTP
  • Install the plugin -Header and Footer Scripts

STEP 1:
Go to www.favicon-generator.org , choose your image and keep the settings as I have kept in the screenshot below,

  • Save

Once you have uploaded and ticked the correct options, click on the Create Favicon and let the website do its magic.

STEP 2:
Once the website finishes generating a new favicon, you have to download the generated favicon.
To do so, click on the “Download the generated favicon”

  • Save

A zip file will be downloaded with all the favicons in it.
Extract the favicons in the root folder of your WordPress installation i.e the same folder where you can find the wp-config file.
If you use A2Hosting, you can use the file manager from CPanel to copy and paste the favicons

  • Save

STEP 3:
Now that you have uploaded all the images in the root folder, you have to link these images in the “Header” section of the blog.
To make it easier for non-coders, install a plugin called – Header and Footer Scripts
Once you have installed and activated the plugin, navigate to Settings > Header and Footer Scripts
Copy the snippet from the Favicon generator site.

  • Save

And paste this code in the Scripts In Header.

  • Save

Save the changes and that all.
You have successfully uploaded a custom favicon to WordPress.

How Long Does It Take For The WordPress Favicon To Be Updated

There is no delay in the favicon showing up in browser tabs, bookmark tabs and as home screen icons. However for the favicon to start showing up on search engine pages, it takes 24 – 48 hours.

Typically the favicon is indexed, whenever the next time a Google bot crawls your page. To speed up you can try manual indexing your page in the web console.

Go to Google Search Console > URL Inspection and paste your home page URL

  • Save

Conclusion

WordPress favicon can help the user easily identify your site. For search engine pages it can help you increase CTR.Overall a favicon might be a small image but its implications are big.

We have covered a WordPress favicon in all aspects and hope this guide helps you upload a custom favicon on your WordPress site.

Eager to know your thoughts. Leave you comment below 🙂

  • Save

What Others Have Also Read

5 thoughts on “WordPress Favicon: Everything You Need To Know”

  1. Wow, wonderful guide brother. This is a very small thing that many people ignore. But you have explained the importance of favicon and all related information in one place very well. Thanks for educating people through your amazing writeups.

  2. Hello Tanmay,

    Awesome post. Favicon is a small icon shown on your browser but it plays a great role in the online world. It also works as identity of your blog or website. Google has also showing favicon on the search result page. I do think that people need to use favicon for branding purposes. Thanks for this detailed post.

    Regards,
    Vishwajeet Kumar

Leave a Comment

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

Enroll In My Free
Blogging Course

Hey I am Tanmay Kapse, a pilot and a passionate blogger from India. Want to grow as a blogger? Sign Up Today

About Tanmay Kapse

Hey this is Tanmay Kapse, owner of BloggingWand. I am a A320 pilot and a professional blogger and an affiliate marketer. I post articles on blogging and SEO tips to help you build a successful blog

Enroll In 10+ Hours FREE Blogging Course

A 10+ hours video course to help you start a winning blog.

*We hate spam too

Share via
Copy link