1. Home
  2. Knowledge Base
  3. How to Add a WordPress Favicon (3 Easy Options)

Favicons, also known as site icons, are the tiny images that appear next to your website title in a browser tab. Most website builders often overlook the inclusion of favicons to their website. According to an industry report, this frequent omission ranks high amongst the most common WordPress mistakes. A favicon is useful in website branding helping you strengthen your brand, establish a unique visual identity online, and improve user experience. Below is an example of a site without a favicon vs. a website with a favicon.

The need for a favicon on your WordPress site

As mentioned earlier, Favicon establishes your site identity, helps with branding, and improves user experience. Often, users have many tabs opened in their browser windows. With an increase in the number of tabs comes the issue of visibility of website title. The Favicon helps users uniquely identify your website.

Also, you can ask your users to add your website to their browser home screen when using a mobile device.

In this article, we will demonstrate three ways to add a WordPress favicon to your site.

 

  • How to add a WordPress Favicon to site via WordPress Customizer
  • How to add WordPress Favicon to site with a Plugin
  • How to add a WordPress Favicon manually

 

HOW TO ADD A WORDPRESS FAVICON TO SITE VIA WORDPRESS CUSTOMIZER

This option has been made available since WordPress version 4.3. Using the customizer makes it easy to upload and crop an image for use as a favicon. This appears to be the most straightforward method for adding a favicon for most users. All you need is an image that is at least 512 pixels in both width and height. It is recommended to use your brand logo as your site icon or Favicon

GETTING STARTED…

Go to your WordPress dashboard Appearance >> customizer.

From there, navigate to your site identity tab

At the bottom of the site icon section, click on the select image button:

Once the image button is selected, the WordPress media library interface will open. Here you can upload a new image or choose from the already existing images in your WordPress media library. When you have the image you like, click on the image, and choose select in the bottom right corner.

WordPress allows you to crop your image in situations where your chosen picture isn’t a perfect square. Always use the box to highlight the section of the image you want to crop for your Favicon. A preview of the final look of your image is provided on the right side of the page.

Once this is done, click on save & publish to launch your Favicon. Anytime you desire to change your Favicon in the future, come back to this page and click change image as shown below.

HOW TO ADD WORDPRESS FAVICON TO SITE WITH A PLUGIN

Plugins make for an easier task to perform operations on WordPress. If you prefer using a plugin to create your WordPress favicon, consider using the popular free plugin called Favicon by “RealfaviconGenerator.” This plugin is simple to use and provides additional compatibility options over different devices and app icons. This plugin can be installed and activated for use from your WordPress dashboard.

After activating the plugin, proceed to Appearance >> Favicon to create your new favicon set then select and upload an image for use as your Favicon.

Note: the image should be a perfect square between the range 70 x 70 to 300 x 300px.

Once an image is selected, click generate favicon button. This click takes you to the RealFaviconGenerator website.

At the RealFaviconGenerator website, scroll down to the page bottom and click “Generate your favicons and HTML code.” 

After a short time of operation, the Real Favicon Generator takes you back to your WordPress site. At this point, your Favicon is now set up and now ready for use. The plugin interface provides you with a preview of how your Favicon would look across different devices.

HOW TO ADD A WORDPRESS FAVICON MANUALLY

This method is for users who prefer doing things manually. Favicons can be added to your site manually through the FTP and a few simple code snippets. For this method, you will need an image to use as your Favicon.

HOW TO CREATE A FAVICON PICTURE?

Most modern browsers support a wide variety of image file types ranging from JPEG, GIF, ICO, and PNG. It is advised to deploy the use of image editing software to crop the image you intend using for your Favicon to the desired style, shape, and appropriate size.

Some great applications that could help you with creating a favicon are: 

Favicon.cc – this lets you design your Favicon from scratch as well as upload an existing image

Favicon-generator– this has similar functionality with the Real Favicon Generator

 For this illustration, we will use the Real Favicon Generator. we first start by uploading the image we want to use for our Favicon

On the next screen, proceed to configure specific details about your Favicon, once done, scroll to the page bottom and click on the Generate your Favicons and HTML code button as shown below.

HOW TO INSTALL YOUR WORDPRESS FAVICON?

Go to the next page, click on the Favicon package button to download your favicon images. always leave this page open as you will need it for a reference code while adding your favicons

connect to your WordPress site via FTP and upload the contents of already created Favicon package now in a zip format (favicons.zip) to the root folder of your WordPress site:

Make sure to add the files in the same folder as your wp-admin and wp-content folders. Then take the code provided by the Real Favicon Generator and paste directly into the <head> section of your theme by editing the theme’s header.php file.

ADDITIONAL TIP

Use a content delivery network to serve favicon images users can optimize their site further by using a content delivery network (CDN) to serve their images by installing a service like key CDN or Cloudflare, visitors to your site will be able to load your favicons from your CDN instead of your server. A plugin like “CDN enabler” should automatically rewrite your WordPress favicon URL to function seamlessly with this method.

 

Was this article helpful?

Leave a Reply

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