Wordpress Tips and Tricks

Add Favicon in WordPress Websites and Blogs

Favicon is a small image file which is seen along with the title in web browsers. These are small square sized images of 16 x 16 dimensions. They can be of any format, .jpg or .gif or .png. But preferably .ico is the best format you should choose to add favicon in WordPress sites. It is because; no compatibility issue arises with any of the modern web browsers. Plus you don’t have to upload multiple favicon files of different dimensions if you choose .ico format.

Earlier we had covered how to add a favicon in Joomla websites. WordPress also allows websites and blogs to create and add a favicon. This tutorial will help you add favicon in WordPress sites efficiently. But before that, you need to create a favicon file with proper format and correct dimensions.

How to add Favicon in WordPress

Create a Favicon for WordPress Sites

  • Select the image you wish to upload for your favicon
  • Either crop or add space to make the image square-shaped
  • Resize the image to 16 x 16 pixel
  • Convert the image to .ico format and save the favicon file

Add Favicon in WordPress Websites & Blogs

  • Log in to the WordPress backend or Admin Panel
  • Go to ‘Appearance’ on the left column
  • Click on ‘Editor’ and go to header.php to edit the file
  • Search for the following line: <link rel=”shortcut icon” and ends with /favicon.ico” />
  • Replace it with the following code:
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
  • Save the changes made

Make sure you have named the image file as ‘favicon’, otherwise replace it with the file name in the above code. You can even add a favicon with a transparent background.

Code to Add Favicon in WordPress with Transparent Background

  • Look for the code that begins with <link rel=”shortcut icon” and ends with /favicon.ico” />
  • Replace the code with the following code within <head> HTML tag:
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.png" />

This is the easiest way to add favicon in WordPress sites. In case you face any difficulty in uploading the favicon file, then you can take the help of our expert support staff. We also offer WordPress Installation and SEO services. Request a Quote for PSD to WordPress and HTML to WordPress template conversion.