WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How to Add a WordPress Favicon to Your Site (2021)

Last Updated on August 12th, 2021

Published on September 19th, 2017

Tags: , ,

Share This Article

Whatever your degree of competence, there are certain aspects of your website’s design that you are most likely overlooking. Adding a favicon to your WordPress website is one of those small touches that may make a significant difference in how your website is regarded. Do you have any idea what a favicon is? Are you making the most of yours?

For a long time, WordPress favicons received insufficient attention. As of today, Favicons are becoming increasingly popular due to the trend of more and more businesses moving online and the digitalization of nearly every area of our lives. That’s not surprising, given its importance in brand recognition.

In this article, we’ll walk you through the different steps of adding a WordPress favicon to your website.

What is a Favicon?

A favicon is a little graphic that appears to the left of a webpage’s title in the browser tab. A favicon’s placement is shown in the image below. The term “favicon” is essentially a contraction of the phrase “favorite icon.” The phrase refers to a file that contains a little icon related to a website in general or a specific webpage that requires this type of visual support. 

Favicons are most commonly found in four places:

  1. The tab in the browser 

A lot of folks have many tabs open at once. Depending on their present needs, the favicon lets them know which websites they have open and which ones they need to browse to. 

  1. Use of bookmarks 

Google Bookmarks are shortcuts to your favorite websites that you’ve saved. You can get to them in a matter of seconds, no matter where you are. You can make them visible on your browser window’s top bar, right below the address bar, or go to them from the menu. 

  1. History of browsing 

This is a useful feature if you want to return to a website you recently visited. When you have a long surfing history or need to locate a website from a few days ago, an instantly recognizable favicon can be really helpful in locating what you’re looking for. 

  1. On mobile devices, in Google search results 

Google’s mobile search design was recently altered, and they began displaying a website’s favicon in the search results.

Why Should You Add a WordPress Favicon to Your Site?

You could be asking yourself why we need to make favicons for our website. Well, this is why:

Article Continues Below

  • The majority of people who use the internet on a regular basis are familiar with favicons. Images are far easier and faster for the brain to process than words. Users can quickly find the site they want by looking at the accompanying favicon when scrolling through a list of favorites. If a website does not have a favicon, a blank page will appear next to the website name. 

When a user has many bookmarks without a favicon, it becomes considerably more difficult to pick the correct site because all of the blank pages will appear the same.

  • One approach to create trust is to use a custom favicon. Visitors will notice and appreciate what it represents, even if it appears to be a modest gesture. Visitors notice when WordPress rookies utilize the default favicon that came with their theme, as well. While anything is preferable to nothing, the custom is preferable to the default. A unique symbol communicates to visitors that you are willing to go above and beyond to meet their needs. That professional demeanor helps to earn a customer’s trust.
  • We are all aware of the significance of logos. It’s the visual link that binds us to a firm. Favicon acts as a small logo, whether it is drawn from your company’s logo or a completely unique graphic representation. It aids in the recall of your brand by internet users.

What’s the difference between a favicon and a WordPress site icon?

A site icon is mentioned in the WordPress control panel, and other services will mention your website’s favicon. Both names are used to describe the same thing. Your WordPress site icon, also known as a favicon, is a little graphic that appears in browser tabs and bookmarks. It can be customized using the platform’s Customizer, a plugin, or a combination of image files and custom HTML. 

Because the phrase “site icon” is more self-explanatory, the WordPress team undoubtedly elected to utilize it throughout the platform’s control panel. But rest certain that your tool, whether it’s a site icon or a favicon, is referring to the same thing.

How to Add WordPress Favicon to Your Site Manually

Is it required to have a custom favicon? No. However, I believe we have demonstrated that they contribute significantly to the overall quality of a visitor’s experience.

Your favicon is an important aspect of your overall branding. It should be consistent with your brand and complement your marketing strategy. Your logo serves as the basis for the favicon. In general, it’s a modified version that satisfies all of the visibility and identification requirements. 

If you’re starting a new business and don’t yet have a logo, start by designing one, but bear in mind that you’ll also need a favicon. 

There are a few typical practices to make a favicon, whether it’s a new logo or an existing one. 

If you’re ready to make a favicon, upgrade from the WordPress default, or improve an old design, follow these steps:

Choose the Correct Favicon Size for Your Website

The size of your favicon is the first thing to consider. You’d be correct in assuming that these files will be small. While the sizes are small, comprehending the numerous dimensions might be difficult. This is due to the fact that different systems have differing favicon size requirements.

Most browsers will accept a 32 by 32 pixel.ico file, which has been the industry standard for decades. In practice, though, you’ll want to utilize an a.png file with a resolution of 512 × 512 pixels. The reason for this is that it covers virtually everything, from the default Chrome site icon size to the bare minimum.

Article Continues Below

This is also a piece of explicit advice within the WordPress back end, by the way (more of which later). After you’ve determined your sizing, it’s time to consider the design.

Follow best practices when it comes to the design of your favicon

Rather than settling for the easy option, you should make the effort to create a unique favicon. 

When creating your favicon, you can include the following:

  • Reduce your trademark to only one or two colors to ensure consistency and visibility. 
  • The default size for a favicon is square. A transparent background is required if you want anything else. A favicon should be linked to your brand’s identity, but it’s usually too small to include a whole logo. Consider employing a recognized component of your logo that can be transferred to a favicon.
  • The small size of favicons necessitates precision in your design. Excessive detail, such as fine lines, texture, or shadowing, should be avoided. So you need to reduce your logo to its most basic components and use this as the focus of your favicon. 
  • Use contrast to draw attention to the most important features of your favicon.

Choose the Best Tool for Creating Your Site Icon

There is special online and offline software for creating favicons that allows you to customize your favicons to your liking.

Create a JPG, PNG, or GIF file containing the symbol you wish to use as a favicon using any image editing application, such as Photoshop, Gimp, or SnagIt.

Canva, on the other hand, is a simpler choice for individuals with little creative skill. You may quickly alter an image and make it favicon-ready with this free graphic design tool website. To make a favicon image that will work for your site, resize your logo or adjust the color or transparency.

However, It is totally up to you to choose the right tool for creating your favicon.

Once you’re happy with the image you want to use as your favicon, save it in png. Your favicon is now ready to be uploaded to your WordPress website. 

How to Add WordPress Favicon to Your Site Using the WordPress Customizer

To begin, go to WordPress and log in

You’ll want to go to your theme preferences panel from the dashboard. Select Appearance > Customize from the menu. This will bring up the live WordPress customizer, complete with a preview of your website’s homepage. Then, Select Site Identity.

Article Continues Below

Choose a Favicon

Click and upload as you typically would with WordPress media uploads from the Select Site icon box. To boost accessibility, remember to use appropriate “alt text” for your site symbol.

On the front end, double-check your favicon

Finally, check the front end of your site to determine if your site icon has uploaded properly.

How to Add WordPress Favicon to Your Site Using a Plugin

Using a plugin, you can easily add a favicon to your website.

RealFavicon Generator

How to Add WordPress Favicon to Your Site Using RealFavicon

RealFavicon Generator’s Favicon is a free plugin that lets you upload and create a favicon for any browser and screen size. The plugin provides stylistic guidelines as well as the ability to assign distinct favicon versions to different browsers and devices. This feature allows you to customize the favicon’s style and quality, as well as your website’s branding.

Pros

  • Accepts non-square photos and provides the option of using a translucent background to repair them. 
  • Create favicons based on the platform you’ve chosen. 
  • Make sure your favicon works across all platforms.

Cons

  • There isn’t a builder tool available.

Price

  • Free

How to Add Favicon to WordPress using RealFavicon Generator

  1. To build your favicon set, go to Appearance Favicon after you’ve activated the plugin. All you have to do is choose or upload an image that is at least 70×70 pixels in size.
  1. Select your image and then click Generate favicon. When you click that button, the plugin will transport you to the RealFaviconGenerator website, which is separate from your WordPress site.
  2. Scroll down to Generate your Favicons and HTML code at the bottom of the page (see the previous section). Real Favicon Generator will take you back to your WordPress dashboard while it works.

Your favicon will then be created and ready to use. In the plugin’s interface, you can see how it will look on different devices.

Get RealFavicon Generator

Favicon.cc

How to Add WordPress Favicon to Your Site Using Favicon.cc

Favicon.cc allows you to be as creative as you want with your icon. You can create a favicon from scratch or use an existing logo as a starting point. Not only that but Favicon.cc lets you make your favicon move!

Pros

  • Create your own favicon with a variety of picture formats — JPG, JPEG, GIF, PNG, BMP, ICO, and CUR image formats 
  • Create your own favicon from the ground up.

Cons

  • You must publish the icon under an open license to acquire the HTML code.

Price

  • Free

Get Favicon.cc

Logaster

How to Add WordPress Favicon to Your Site Using Logaster

All you have to do is type in your company’s name and pick from a variety of ready-made but customizable themes. 

While you may make modest logos for free, you’ll need to upgrade to their premium plan to obtain access to other image formats and editing tools.

Pros

  • Use the pre-made templates to quickly generate a favicon. 
  • Depending on your paid plan, you can use your web and print logos on social media banners, stationery designs, and brand books. 
  • Create a free account to save your logo and update it on the go.

Cons

  • To use all of their features, you’ll need to upgrade to a premium subscription. 
  • You can only download small-sized PNG images with the free plan.

Price

  • Logaster’s premium plans cost between $5.99 and $18.99 per month.

Get Logaster

What happens if I disabled the RealFaviconGenerator plugin or remove it entirely? 

Your WordPress favicon will be removed if you deactivate the RealFaviconGenerator plugin. However, if you haven’t uninstalled the plugin, merely reactivating it will return your icon to its previous state. 

Your site symbol will be permanently removed from your website if you delete the plugin. This means that if you want to make another one, you’ll have to re-optimize your source image for numerous formats. 

This is one of the benefits of using a plugin to create a WordPress favicon. By manually adding the relevant HTML and files to your website after creating them from the RFG site, you eliminate your reliance on any third-party services. 

How to Add Favicon via FTP 

If your host has cPanel, you can add a favicon to your WordPress site using File Transfer Protocol (FTP) or File Manager if you want to do things manually.

  1. Use an FTP program or the File Manager in your hosting cPanel to access your site’s files.
  2. Locate and upload the image to the root directory of your website.

The root directory (sometimes known as the root folder) is the main folder in which your WordPress files are stored (it’s usually public_html). Take the code RealFaviconGenerator gave you before and do one of the following:

  • To add it to your theme’s header, use a plugin like Insert Headers and Footers. 
  • By changing your theme’s header.php file, paste it right into the head> section of your theme.
  1. Insert Headers and Footers must be installed and activated. Then go to Insert Headers and Footers in Settings and enter the following code into the Scripts in the Header section.
  2. Then save your modifications. That’s it you’re finished!

Wrapping It Up!

If you’re new to the internet, this may be the first time you’ve given your favicon any thought. Favicons are one of those minor design features that have a tremendous impact on how a website is perceived. It increases the user experience and brand awareness by making your site look more professional. Businesses compete for the attention of online users. Every design detail is significant. Make your website stand out from the competition.

As a businessperson, it’s likely been years since you’ve even looked at your unique image. In any case, make sure your favicon is a benefit to your website’s success rather than a problem.

In this article, You’ve learned not only why having a favicon is useful, but also how to make one and how to add it to your WordPress site in three easy ways.

With current versions of the WordPress platform, this process has grown a lot easier. If your site does not support the Customizer option, you can still utilize a plugin, your theme settings, or change it manually as in the past. 

Regardless of which method you use, the favicon will have a significant impact on how people perceive your website. And in the end, that’s all that matters.

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.