Favicons are tiny square icons or images that you usually see on the left side of the browser’s address bar. These are 16×16 pixels very small images mostly a logo or a part of it which is often used by web browsers when a page is displayed to the user. It plays a significant role in professional logo and brand design. You must have had probably seen many favicons before, even though you were not aware about what they are. A favicon can sometimes also be called as shortcut icon, website icon, tab icon, URL icon, or bookmark icon. Check out the favicon design shown below.

Why Do You Need A Favicon?

There are two absolute reasons to employ favicons in your website design.

• Branding

• Ease Of Access

The former plays a crucial role in brand design while latter is associated to help users recognize a website if they have opened several tabs in the same window. It allows them to easily figure out your website among a number of website being accessed simultaneously.

Favicon Design Process

There are several ways to design a favicon for your website. You do not necessarily need to be a design expert to create a favicon. All you need is an online favicon design tool or one of the useful image editing softwares to generate a flexible favicon.

You can easily find those tools on the web and image editing softwares such as Adobe Photoshop which is very handy for designing variety of favicons.

How To Use Your Favicon?

This is quite easy to carry out deploy favicons to your website. We shall follow a two-step process to add favicons to a website.

Step-1: You need to upload the favicon file “favicon.ico” to the server. To do so, point your browser address bar to your FTP server. Your URL might look similar to this:

“ftp://[email protected]”

When you press enter, the browser will prompt you seeking an username and password. Once you get access to the root folder, upload your favicon file into it.

Step-2: Now, you need to edit the HTML page of your website to help browsers fetch your favicon image while displaying your web page.

To do this, keep your FTP window open and download the “index.html” or “header.php” file from server and follow the steps below according to the file you get:

Now, insert the code below in the HEAD area of the “index.html” file, and  change “yourwebsite.com” for your own website address.

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

The Bottom Line

Favicons are little things that we usually do not care for, however, the truth is far from being insignificant. They are a very crucial part of the web from the two perspective discussed above, the user’s relevance and the branding. Favicon design is a major part of professional logo and brand design. As it is said, great things come in small sizes, and this applies to favicons as well.