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
Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg:— Lea Verou (@LeaVerou) March 22, 2020
<svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU
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.
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.
Now that your WordPress version is above 4.3 we can use the customizer to upload the favicon.
Use WordPress Customizer To Upload Favicon
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.
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.
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.
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.
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”
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,
Once you are happy with the settings, click on the Generate button.
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
Go to www.favicon-generator.org , choose your image and keep the settings as I have kept in the screenshot below,
Once you have uploaded and ticked the correct options, click on the Create Favicon and let the website do its magic.
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”
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
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.
And paste this code in the Scripts In Header.
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
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 🙂