How To Create Favicon For WordPress Site?

A favicon or Favorites Icon is a small graphic that is associated with a page or website. In case you have problems creating one here is short tutorial on how to create favicon for WordPress site?

Favicons are small square images usually 16×16 pixels. They are used by web browsers to show a graphical representation of the site being visited at the left side of the browser’s address bar. You have probably seen many favicons before, even if you don’t know what they are.

Here is interesting fact: It was named favicon because it was first developed for Internet Explorer. IE calls bookmarked sites “favorites” and this icon was displayed in the favorites menu.

I bet you didn’t know that! Most site favicons are designed as a small-sized versions of their logo or other branding mechanism. Favicons are very little. Some may say they are least important part of a site. I personally find favicons very important from a branding point-of-view.

 

How-To-Create-Favicon-For-WordPress-Site

 

Main reason for having favicons nowadays is to improve user experience. Favicons are used in all modern browsers at the address bar, in the links bar, in the bookmarking area and in its browsing tabs.

Few browsers also show favicons whenever you create a shortcut link for the corresponding website in your desktop and your mobile device. It helps visitors identify your website and more frequent visitors will build an instant recognition for that tiny image.

Also most users usually have many tabs open in their browser window. This hides your website’s title as the number of tabs increase. The favicon helps user identify your website and quickly switch to the tab they want.

 

How To Create Favicon For WordPress Site?

Creating favicon is very easy. Using some image or your website logo. Even the less tech-savvy of us can do it in about 5 minutes or less, using the right tools. There are numerous websites that allow you to create a favicon simply by uploading a pre-existent image.

So if you want to create a favicon for WordPress, all you need to do is to upload your logo to one of the following sites and download the favicon file.

Here are some of the Favicon generators:

The websites above vary in terms of file size and extension. If you are looking to get the most compatible file possible, I strongly recommend downloading an image sized 16×16 pixels with the “ico” format. Now it is only left to add favicon to WordPress.

 

How To Add Favicon To WordPress Site?

After finding out how to create favicon for WordPress site, it is time to use it. Most WordPress themes have option to easily upload favicon using themes control panel. If your theme doesn’t support that, you will need to do some extra steps.

1. First you’ll need to upload the “favicon.ico” file to your server. You can do that using FTP or cPanel File Manager. If you don’t know what cPanel is, then be sure to check cPanel vs vDeck comparison where I show all pros and cons.

Then upload the “favicon.ico” file to the root folder. In most times step 1 will be enough as most modern browsers are smart enough to find your favicon file even without any piece of code, but only as long as the favicon image has 16×16 pixels and  it has been named as “favicon.ico” and is saved in the root folder of your website folder.

 

2. But if favicon doesn’t show up, insert the code below in the HEAD area of your “header.php” file:

<link rel="shortcut icon" type="image/x-icon" href="php bloginfo('url') ?>/favicon.ico">

If your theme does not have a header.php file, or you can not find it install and activate Insert Headers and Footers plugin. After activating the plugin go to Settings » Insert Headers and Footers and paste the code provided above in the header section and save your settings.

If you don’t want to deal with FTP at all, then you can also use the plugin called All in One Favicon which is easy to use favicon wordpress plugin.

 

3. Without uploading plugins there is another way to upload favicon.

  • Go to your hosting Hosting CPanel —> File Manager
  • Search for the default image in the Theme folder. For example: genesis/images/ favicon.ico
  • Upload your .ico file to the same folder and remember the name of the default file (here favicon.ico)
  • Then delete default file and rename the new image file with the previous file name.

 

UPDATE

Since WordPress 4.3, you can add a favicon from WordPress admin area. Simply go to Appearance » Customize and click on the ‘Site Identity’ tab.

The site identity section in customizer allows you to change the site title, description, and control whether or not you want to display them in the header.

It also allows you to upload your site favicon. Simply upload the image you want to use as favicon. Recommended size is 512 x 512 px.

If the image you are uploading exceeds recommended size, then WordPress will allow you to crop it. If it matches the recommended size exactly, then you can just save your changes.

 

Using Favicon In WordPress Site

As you could see, creating and uploading favicon is very simple. Go, give it a try if you don’t have one or your site is on default icon. Favicons are one of those little things that we usually don’t pay too much attention.

But they are a very important part of the web, both from a user interface perspective and a branding point-of-view.

Some say that great things come in small sizes. Web designer and/or branding specialist who always take the time to add a favicon to their clients’ sites or his own, demonstrates a great deal of professionalism and attention to detail.


DISCLOSURE: Posts may contain affiliate links. If you buy something through one of those links, I might get a small commission, without any extra cost to you. Read more about it here.

8 thoughts on “How To Create Favicon For WordPress Site?”

  1. I went to several websites where you can create a favicon but this I was particularly delighted with its ease , you can create your own favicon that suits you , or upload the image as desired by converting the ICO file. Try it, I recommended http://onlinefavicon.com/

  2. Those are great tips. I was looking how to add favicon to my WordPress site and came across this tutorial.

    Added favicon in no time!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top