Steps to Add Favicon in WordPress Site

Favicon is short form for favorite icon. These are the tiny images that are displayed in the browsers tab next to the websites title. The favicons do appear in other places also like in the list of bookmarks, favorites and history in browsers. The favicons are typically 16×16 or 32×32 pixel image. This article shows steps to add Favicon in WordPress site.

Steps to Add Favicon in WordPress Site

history

There are numerous advantages of having favicons in your website. Here are a few reasons for why you should keep favicons in your website.

  • Favicon is a visual identity of any website. Favicons play a vital role in branding your website.
  • When users have multiple tab open, favicons grab user’s attention and help users to switch quickly between websites they want.
  • Favicon improves site’s usability and enhances user experience.
  • Favicon gives your website professional look.

The most widely supported format for favicon image is ICO file format. GIF, JPEG and PNG are some other formats that can be used as favicon image. However some old browsers may not support JPEG, GIF and PNG format favicons. So it is always best practice to use ICO extension as favicons.

Steps to Add Favicon in WordPress Site

Using WordPress Customizer

With the release of WordPress 4.3, adding favicons in WordPress has become very easy. You can directly add favicons from admin area. You will need a 512×512 pixel image to upload and you won’t have to bother converting it into .ico format. If you are using the updated version of WordPress 4.3 or above follow these steps to easily add favicons in WordPress websites.

1. Login to admin Dashboard.
2. Go to Appearance > Customize
Steps to Add Favicon in WordPress Site3. This opens the customizer window. Now click on the Site Identity in the left vertical menu.
Steps to Add Favicon in WordPress Site4. Site Identity allows you to change the logo, title and tagline. There is also a section in site identity called Site Icon. Site Icon is another name for favicon. This is where you choose your favicon image.
Steps to Add Favicon in WordPress Site5. Select the favicon image and click save and publish button on the top. Now you should have a favicon in your website that you just added.
Steps to Add Favicon in WordPress SiteNote: The favicon or site icon image should be perfectly square and at least (512 x 512) px dimension. If you upload larger image with unequal size, WordPress allows you to crop the image as well. You can also use photo editing programs like Photoshop to maintain the proportion.

Adding Favicon to Older WordPress (4.2 or below)

Unfortunately if you are not using latest WordPress versions, you may not utilize the WordPress customizer to add favicon. In this case you can either add favicon by adding little code in your theme or you can try some easy plugins.

Also Read:   How to Check Disk Usage in WordPress

First you have to upload your favicon image to your website root directory. In the directories of your folder find header.php and copy and paste the following code.

<link rel="icon" type="image/x-icon" href="/favicon.ico">

If you are placing the favicon.ico file in the root of your theme folder (e.g. www.yourwebsite.com/wp-content/themes/twentyfourteen/favicon.ico), you would use:

<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Use this code if you upload the favicon.ico image to the root of your domain:

<link rel="icon" type="image/x-icon" href="http://www.yourwebsite.com/favicon.ico">

Once you save the changes in the file you should see the favicon in the title of your website.

Using Plugin to add Favicon in WordPress

With the ability to add favicons from WordPress customizer, the use of plugins for this task is massively decreased. Most of the plugins to add favicons in WordPress are outdated. You can still install. All in One Favicon plugin which allows adding favicons easily without much effort. We still recommend you use the updated version of WordPress and plugins.

We hope the article was helpful in adding favicon to your website.

 

 

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post