How to Create a WordPress Favicon for Your Site

by Waseem Abbas on May 11, 2016

Do you want to add a WordPress favicon to your site? Your favicon is an important part of your website’s user experience. In this article we will show you how to create a WordPress favicon for your site.

Why is a Favicon Important for Your Site?

A favicon is a simple, small icon that appears next to the title of your site in the browser. It helps your visitors to identify you easily in the browser’s tabs, or in their bookmarks.

This site icon increases the credibility of your site and adds value to the overall experience for your visitors.

In the above image, you can see that site titles are not fully visible because of the multiple tabs opened. However, the favicon is visible and you can still recognize the sites. This way, you can easily move to any browser tab with the help of the favicon.

Another great reason to include a favicon on your site is that your visitors can pin your site on their mobile devices and the favicon will appear on their mobile screens.

Creating Your WordPress Favicon in Photoshop

You can use your site’s logo or a relevant symbol that you own to design your own favicon.

First thing you should do is create a new transparent file in Photoshop.

The best size for a favicon is 512 pixels in both width and height (a perfect square). If you use a rectangular image, then WordPress will crop it to a square shape.

Now open up your site’s logo or icon file and move it to your transparent new file in Photoshop.

We recommend saving the file in .png format to keep the transparency. However, if you are using any color in the background, then you can also save your file as a .jpeg or .gif.

Now your favicon is ready to be added to your site!

Adding the Favicon to Your WordPress Site

If you are using WordPress 4.3 or higher version, then follow these steps. Otherwise, continue to the next section.

To add your favicon to your WordPress site, you can simply go to the Appearance » Customize from WordPress admin and click on the Site Identity option.

You will see several options, including logo, site title, description and controls.

You can go ahead and click on the Select Image button to upload the favicon to your site.

Once uploaded, simply press the Save & Publish button. You site icon will now appear in the browser’s tab with the site title.

To add your site icon on your mobile screen, simply visit the site from the mobile phone and select the Add to homescreen option from the browser settings.

Add Favicon with WordPress 4.2 or Earlier

To add the favicon in an older version of WordPress, you can simply upload the icon file into the root directory of your site using FTP.

Now go ahead and paste the following code into your theme’s header.php file.

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

You need to replace enviragallery.com with the URL of your site. Then your favicon should appear in the browser tab.

If your theme doesn’t have a header.php file, then install and activate the Insert Headers and Footers plugin (you can learn more about how to install and activate a WordPress plugin here).

Then you can go to Settings » Insert Headers and Footers from your WordPress admin and simply paste the code that we mentioned above in the header section. That’s all.

However, if you are not comfortable with using code, then go ahead and install the All in One Favicon plugin to add the favicon to your site.

We hope this article has helped you to learn how to create a WordPress favicon for your site. You may also want to check out our guide on how to add social share buttons in WordPress image galleries.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.