How to Add a Favicon to Your WordPress Website

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

A favicon is a tiny logo that is displayed in browser tabs that allows you to promote your brand even on tiny devices.

Table of Contents

What is a Favicon and Why Do I Need One? 

Favicons need to be as small as 16px x 16px (pixels) yet still clearly display your identity. If you don’t have a favicon then users visiting your website will see a grey/black globe icon on the browser tab instead.

A favicon is used by website users to identify your brand amongst others helping with your brand placement and improving overall user experience.

Those are favicons.

In this article, we’ll discuss three different tools you can use to generate a favicon and how to upload the favicon to your WordPress website. Let’s go!

How to Create a Favicon for a WordPress Website

Most businesses will use their logo as their favicon but if you need to create one from scratch then keep on reading.

Modern browsers allow you to use PNG, JPEG, and GIF files for your favicon. However, if you are using internet explorer you may need to do some testing as not all versions of IE except those file types.

If you are adept at using a design tool like Photoshop or Illustrator you can crack on with a custom design. For those of us that need a helping hand, it’s easier (and quicker) to use a web-based tool to generate a favicon from an image (or even just a colour).

Below we have listed three different web-based favicon generators that you can use to quickly and conveniently create the favicon of your dreams.

Favicon Tool #1: Real Fav Icon Generator

Use Real Favicon Generator (https://realfavicongenerator.net) to create a favicon for your website.

You can use the tool to: 

  1. Check your existing favicon
  2. Demo a random favicon
  3. Create an SVG favicon
Real Favicon Generator

 

How to use Real Favicon Generator

Step: 1

Click on the “Select your favicon image ” button and upload your logo or image.

Step: 2

The next webpage will display your favicon details for each browser type and will give you options for changing the margins and background or keeping the original image.

Step 3:

Click on “generate your favicon and HTML code” to create the code you will use to display the favicon on your website.

Favicon code

To install the code above you will need to have access to your WordPress files either via cPanel, Plesk, or SSH.

Favicon Tool #2: Favicon CC

Favicon CC (https://www.favicon.cc) is a really cool tool for creating a favicon as it allows you to actually draw your own favicon by colouring in pixels and saving the image. 

favicon cc
Favicon CC

 

How to use Favicon CC

Step 1: 

Choose a colour that you want to use to create your favicon.

Step 2:

Click on the squares and paint your logo to use as a favicon.

Step 3:

Download your logo favicon by scrolling down the page and clicking the “download favicon” button.

Step 4:

Put the favicon.ico file into your webserver directory.

Step 5:

Optionally publish it under the CC (Creative Commons) license.

Favicon Tool #3: Favicon Generator

Favicon Generator (https://www.favicon-generator.org) allows you to create favicons for the web and for apps. 

Favicon Generator
Favicon Generator

This tool allows you to create favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps or to select only to generate a 16px x 16px favicon.

Additionally, you can select a pre-designed favicon by choosing from a colour palette which then displays a list of favicons for you to choose from.

How to use Favicon generator

Step 1: 

Upload an image you intend to use as a favicon or select a colour from the colour palette options. 

Step 2: 

Download your favicon file and upload it to your website. 

How to Upload a Favicon to Your WordPress Site: Using the WordPress Customizer

Now that you have created your shiny new favicon you’re going to need to upload it to your WordPress website. 
 
Let’s take a look at three different ways in which you can do that starting with WordPress’s built-in customizer tool. 
 
The WordPress customizer can be accessed from within the WordPress admin dashboard. Start by logging in to the admin dashboard and clicking on “appearance” then “customise”. 
 
wordpress admin dashboard
WordPress admin dashboard

 

From the customise panel you need to head over to “site identity”. 

site identity panel
Site Identity Panel

 

Then scroll down the page and click on “select site icon”. 

Select Site Icon
Select “site icon” on the bottom right

 

The WordPress Media Library will open up and you will be able to choose your site icon. 

Remember, the icon needs to be at least 512px by 512px and you need to ensure that it still looks good when it’s as small as 16px by 16px which will be the size on smaller devices. 

WordPress Media Library
WordPress Media Library

 

If your image is not the correct dimensions (512px by 512px) then you will be able to crop the image before saving it. 

Once you are happy with the image then hit the “save and publish” button and voila! You have a favicon saved to your site.

How to Upload a Favicon to Your WordPress Site: Using the RealFaviconGenerator Plugin

If you decide you want to use a plugin to upload your favicon then the Real Favicon Generator plugin gives you a few extra options for device compatibility and is very simple to use. 

Start by downloading and installing the plugin in the WordPress admin dashboard. 

RealFaviconGenerator Plugin
Favicon plugin by RealFaviconGenerator

 

Once you have activated the plugin go to “appearance” then “favicon” to create your Favicon. 

Favicon
Create your Favicon

 

Select your media from the WordPress Media Library and create your Favicon set. You will need to ensure your image is a minimum of 70px by 70 px so that the plugin can generate the correct file size. 

When you select your media file you will be directed away from WordPress and sent to the Real Favicon Generator website. 

Real Favicon Generator website
Real Favicon Generator website

 

If you are happy with the results you should scroll down to the bottom of the page and click “generate your favicons and HTML code”. Upon doing so you will be redirected back to your WordPress site. 

Favicon installed
Favicon installed

 

Your favicons are now installed and good to go! You can preview them on different devices using the dashboard. 

How to Upload a Favicon to Your WordPress Site: Using FTP

If you are going to add your favicon the old-fashioned way (manually) then you will need to first create the favicon and then upload it via FTP or cPanel/Plesk to your main directory.

In step one of this article, we showed you how to generate the HTML for a favicon using the Real Favicon Generator. 

To upload your favicon manually you are going to need to generate the favicon package as per that process. 

  1. The first step in the process is to access your site’s files via FTP or file manager. 
  2. You should then upload your favicon package in zip format to your root directory. The root directory is the same directory containing wp-admin and wp-content folders. 
Root Directory
Root Directory

 

You now need to add some code to the head of your WordPress site. You can do this either by directly editing the header.php file within your file manager or you can use a plugin that gives you access to the header within the WordPress dashboard. A good plugin to help you achieve that is Insert Headers and Footers plugin.

Now select the code that you generated as part of the favicon package. 

Favicon code
Favicon code

 

Open up the Header and Footer plugin via “settings” in the WordPress dashboard and add the code under “header”. 

Header and Footer Plugin
Header and Footer Plugin

 

Once you have uploaded the code to the header you are good to go. Save the file and check to confirm it has worked! 

 

Summary

 A favicon is a mini logo displayed in browser tabs to help users identify your brand. You can either create your own favicon with a design tool like Photoshop or you can use one of the aforementioned tools to create one. 

Once you have create your favicon you can use one of the three different approaches listed above to upload your favicon to your WordPress website.  
 

Grow your Business with our WordPress Care Plans

GenUp Digital’s 24/7 unlimited website edits, account manager, and dedicated WordPress hosting are like hiring an in-house web team – at a fraction of the cost.

Step one – Choose a plan from just £4 a day.

Step two – Speak with an account manager.

Step three – Get dedicated WordPress hosting, 24/7 unlimited website edits, and more. 

Find out more about our WordPress Care Plans here.  

Related Articles

Responses

Your email address will not be published.