How to add a favicon to a website

While experienced site owners know well what is a favicon, beginners can struggle with its definition. Favicon is a small icon representing the site's logo. It can be seen in browser's tabs, in bookmarks, in front of a page's name and in browsing history. For some browsers, the favicon is also located in a search bar before the URL.

Other than a logo, favicon can include a symbol mirroring the subject of the site (the first letter of a company's name). The icon's size is usually 32x32 or 16x16 pixels.

The icon, provided by favicon, plays an essential role in site branding. A concise image helps users to memorize the site. Thus, granting its uniqueness: a site without the favicon looks unattractive in comparison to others. Users just see a default Windows icon instead of the eye-catching and memorable picture. Such an icon had been used even before a flat screen was invented.

Moreover, favicon usage provides other advantages:

The icon is easy to create. You don't have to be a designer or have some professional skills to do this. Using online-services, favicon is created in just a couple of minutes.

All the sites below are user-friendly. We gathered several services that allow you to create a unique icon for free.

• Favicon.ico
  
  

It's a simple and clear service. You can draw your own favicon or import existing images from your PC. Likewise, you can add animation, make several images or just choose an already-made icon.

• Favicon-generator.org
  
  

This service allows creating icons not only for PC browsers but for mobile and tablet apps too. Here you can also import your own image or find already existing ones via search.

• Favicomatic.com
  
  

Besides favicons generating, this site can give you an idea about the way your site looks on different devices. It will point out some drawbacks and help you to deal with them too.

Every service creates a code which you should paste into the site catalog. The favicon adding process will be explained below.

You may use professional design services to create the favicon or do it yourself using Photoshop or any other editor but these tools are not always cheap and simple.

To make the icon visible for every user, it needs to be added to the site catalog. A browser will find it and show it on the site if the icon's format is 16x16 pixels. The browser can't show 32x32 images automatically; you will have to do this manually. But it is recommended to make icons in both formats.

Type the favicon display in the page code:

1. Add a favicon.ico file to the root folder — a site catalog;
   
   
2. Type the following in the pages' code:
   

Browsers cash icons, so if you decide to change the favicon in the future, it's better to use temporary code. Otherwise, you will change the image on a server but users' browsers will still display the old one for some time.

Here v=2 means icon version. Add 1 every time you change the image (v=3, v=4) and browsers will save the latest version. After you definitely know the exact favicon you want to use, delete this link without any hesitation.

Favicon is an important part of any website. The high-qualified and unique image becomes the second face of the brand. It helps users to remember the site and find it among lots of other ones in a subtle way.

Creating and adding the favicon will take you less than 10 minutes. There are a lot of free online services with different functions and a great choice of samples.