How to Install a Favicon on Your WordPress Site

By November 8, 2018WordPress

Favicon is also called Site Icon – it represents your website. If you don’t know what a favicon is, it’s that little image that appears near your URL when you access your site from a browser.

Most websites use their company logo as favicon. The reason behind this is that people (your followers, readers, site visitors) will recognize your brand by your logo (offline and online). Now, don’t take this lightly, you know that recognizing your brand helps build trust from your followers.

At this point, we are telling you that not using a favicon is a big BIG mistake. Just try looking at big companies’ favicons and you’ll see what we mean. Here are some examples:

  1. Facebook – Their favicon is their logo – you know, the small letter F with a blue background.
  2. Gmail – Google’s mailing system also has a recognizable logo – the big letter M surrounded by white background.
  3. YouTube – You’ll recognize YouTube’s logo for sure – yes, they also use their red play button as their favicon.
  4. Twitter – Of course, you know Twitter’s blue bird logo. Yes, it’s also their favicon.
  5. WordPress – Who wouldn’t recognize the WordPress logo of gray and white colors that form the letter W? Website owners and WordPress platform users are surely familiar with this.

Go ahead and check them all out to get a better idea on what you’re trying to achieve.

Tips to Creating a Favicon

Follow these tips when creating your own favicon:

  1. We advise using your brand’s logo as your website favicon.
  2. Your favicon should have a size of 512px X 512px. Smaller images are not accepted. However, if you have a large-sized favicon, you can crop out the extra edges to make the image smaller. This, of course, could affect your brand’s logo – so, we still recommend having the exact size.
  3. Favicon images all have square shapes. If your logo is rectangular, it can still work as WordPress allows image cropping.

Note: To fix the size and shape of your favicon (to the exact size), you can use image editing programs such as Adobe Photoshop. These photo editing programs usually carry a lot of options for you to play with.

  1. Your favicon image can be in jpeg, png, and gif format.

How to Add Your Site Icon in WordPress

There was a time when favicon features were only available in expensive WordPress themes. Since WordPress 4.3, however, webmasters can upload favicons through the Admin area in their WordPress Dashboard. Here are the steps to follow if you’re using WordPress 4.3 or higher:

  1. On your dashboard, look for the Appearance section and click on the Customize option.
  2. Click the Site Identity tab. This is the section where you can edit your website’s title, description, etc.
  3. While still in the Site Identity tab, look for the Site Icon section.
  4. In the Site Icon section, click on the Select File button.
  5. Upload your favicon image.
  6. Click Save.

Note: If your image is bigger than the required size, you will get a notification with an option to resize (crop) your image.

How to Upload Favicon

How to Add Favicon to Older Versions of WordPress

If your WordPress version is 4.2 or older, you can still upload your site favicon by following these steps:

  1. Connect to your website using an FTP client.
  2. Upload your 512px X 512px image to the root directory of your website.
  3. Copy and paste the code below to your theme’s header.php folder.

	<link rel="icon" href="https://www.your-website.com/favicon.png" type="image/x-icon" />
	<link rel="shortcut icon" href="https://www.your-website.com/favicon.png" type="image/x-icon" />

Using a Plugin to Create a Favicon

If you can’t find the header.php file on your theme, or if your theme simply doesn’t carry a header.php function, you can use a plugin instead. The steps to doing this are listed below.

  1. Go to the Add Plugins section on your WordPress Dashboard.
  2. Search for Insert Headers and Footers plugin. You can also check out related results to see which plugin suits you best.
  3. Install the plugin of your choice. In this case, we’ll assume that you picked the Insert Headers and Footers plugin.
  4. Activate the plugin.
  5. Go back to the Admin area and go to the Settings section.
  6. Click Insert Footers and Headers.
  7. Copy and paste this code in the header section. It’s the same code we used above (if your theme has a header.php file).

	<link rel="icon" href="https://www.your-website.com/favicon.png" type="image/x-icon" />
	<link rel="shortcut icon" href="https://www.your-website.com/favicon.png" type="image/x-icon" />

  1. Click Save.

Should You Add a Favicon to Your WordPress Site?

We highly recommend using a favicon for your site. You have nothing to lose as favicons will boost your brand’s authority – and they’re cute as well.

Just think about it, if you don’t upload your own favicon, your hosting provider will probably put their own favicon there. When this happens, their brand and logo will get free promotion from your site every time someone accesses it.

As you can see in this post, the steps to adding a favicon to your site are very simple. Also, think about the benefits of promoting your site through a favicon. So, don’t delay and do it now.

MangoMatter WP Team

About MangoMatter WP Team

We live to solve WordPress issues, and help beginners on their WP journey :)