Favicon: What is it

An elegant and simple way to facilitate the visual identification of your website in page lists or groups of tabs  is by implementing a  favicon . Today we are going to see what a favicon is, how you can create a favicon in HTML and, above all, analyze in which cases it is recommended to use it.

What is a favicon


A favicon is a miniature icon , descriptive of a specific web page, that identifies the page in several areas ; Its aspect ratio is 1:1 (a perfect square), and its size usually ranges between 16×16 or 32×32 pixels.  

Perhaps the definition is somewhat ethereal, but you can see it better with a couple of examples:

  • When you open a web page in a browser, if you look at the top left of the tab , you will see a small icon. 

  • Additionally, if you check your browser’s Favorites , you’ll see that the name of each saved website is preceded by that same thumbnail image. 

What is a favicon for: is it really necessary?

The favicon is a small icon that accompanies the web page, and that helps with its visual identification, especially when it shares a list with other web pages. It helps with navigation , as it allows you to easily identify the page when you have several tabs open at the same time. 

Likewise, when the page is incorporated into a Favorites list or a Bookmarks bar, it allows quick visual identification to the user , which will easily distinguish it from the rest. 

Necessary? Maybe it is not, but there is no doubt that it is highly recommended, because you will provide a tool for users to differentiate your page from the others . 

And don’t forget that the favicon will act as the brand image of your page : it will be a logo that helps users associate your website with specific iconography. 

How to make a favicon

Favicon in WordPress

WordPress is perhaps the most popular CMS for creating websites without needing application development knowledge. In the Appearance – Customize menu, the interface will allow you to upload an image and turn it into the favicon of your page . Of course: you will have to find the image yourself.   

Online tools

You can also create a favicon from scratch on free websites like favicon.cc, favicon.io or x-icon editor; or if what you want is to edit or transform an image that you already have, you can use Genfavicon or Favicon Generator.  

Graphic design programs

This is, without a doubt, the most professional method: if you dare to create a favicon from scratch, and you use graphic design tools such as Illustrator or Photoshop , all you have to do is design the image yourself (adjusting to the recommended size) and Save in .ico format, and then incorporate it into the HTML of your page directly, or through the CMS you are using. 

Now that you know what a favicon is, you might want to incorporate these small icons into your website to make navigation more accessible to your visitors. Furthermore, if the logo chosen is unique and personal, you will be helping Internet users associate the image with your website: as you can see, it is a simple marketing trick!