What is a Favicon for? How to create it?

Last week, my friend asked me a question that surprised me a little: what is a favicon? And above all, what is it for?

And since I’m a responsive blogger, eager for new ideas for article topics, I thought it would be interesting to do a quick brief on Joptimise.

Today I propose to explain to you what a favicon is and its usefulness. Then, I will give you several techniques to create an effective favicon and the process to integrate it on your site (WordPress & Prestashop).

What is a favicon?

First, I must explain to you what a favicon is and its role on a website, whether it is an online store or not.

Definition & translation

The word “favicon” is derived from the two English words “favorite” and “icon”. It can thus be translated into French by the “favorites icon”.

Thus, a favicon is an icon displayed in the favorites bar of an internet browser. This icon generally takes the site logo or a simplified logo if it is too complex to appear in miniature.

What’s the point?

Internet users mainly use the favicon to allow them to quickly identify your site in their bookmarks bar. It is, therefore, an element of UX design.

Indeed, it has been demonstrated for several years that an image attracts more the eye of an Internet user than a text. It thus promotes the Internet user’s search when he seeks to access your site from his favorites.

Therefore, like a logo, the favicon is a visual element that must be part of a company’s graphic charter.

How to create a favicon?

Now that you know the purpose of a favicon, it is interesting to know how to create it: what is its format? What dimension? Should I use the logo of my site? If not, how do you generate a favicon from an image? etc.… Follow the guide!

What is the format of a Favicon?

Because nothing is ever very simple when it comes to design, the favicon’s dimensions are different depending on the main browsers such as Chrome, Firefox, IE, or Safari.

For example, Microsoft’s formats for its browsers are 16 x 16, 32 x 32, and 48 x 48. Apple, on the other hand, recommends that the dimension of the favicon be 180 x 180.

How do you get by with all these dimensions?

If you don’t want to take the lead, I recommend using a favicon generator like this site.

There are several on the market which have the advantage of providing you with all the regulatory formats expected by the different browsers.

Most offer you to upload your image, and in just a few clicks, you will be able to upload your generated image in the favicon with the different formats.

Favor images in square format

The last tip, if you have a rectangular logo, I advise you to create a simplified version of it in square format.

Indeed, as you could see on various dimensions, a favicon is a square format. Thus, the rendering of a rectangular logo in square format will be of very poor quality.

How to install a favicon?

That’s it, you have created your favicon, and you now want to add it to your website. But how to do it? Please don’t panic; it’s very simple. Here is the process to add your favicon on a WordPress site or any other site using HTML.

WordPress

To embed a favicon on a WordPress site, the easiest solution to avoid using a module is to upload the image you want to use as a favicon. Remember to rename it favicon.ico before uploading it.

Once the image is uploaded, add the following code in the HEAD section of your theme via the following path: appearance> editor> Header.

The simplest solution to integrate a favicon on a Prestashop online store is to go to your FTP and replace the favicon.ico file present in your site’s “image” folder.

Do you want to launch your online business presence? Are you looking for Web Development in Pakistan to upgrade your web design? Count on us to get competing Web Design and Development services.