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).
Go to the part of the article
- What is a favicon?
- What’s the point?
- How to create a favicon?
- What is the format of a Favicon?
- How to get by with all these dimensions?
- Favor images in square format
- How to install a favicon?
What is a favicon?
First, I need to explain to you what a favicon is and its role on a website, whether it is an online store or not.
The word favicon comes from the contraction of 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 in the event that it is too complex to appear in miniature.
To start with the technical aspects, a Favicon is a 16 × 16 pixel. ICO file.
The Favicon is an important component of your website interface.
Indeed, the Favicon of your website is directly linked to your online image, so it must be created in the same graphic style as your website.
Despite its small size, the Favicon must represent a relevant and clear image in order to allow the Internet user to immediately understand what is represented.
In the idea, this image must also be memorable.
What’s the point?
The favicon is mainly used by Internet users 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 the eye of an Internet user more than a text. It thus promotes the search of the Internet user when he seeks to access your site from his favorites.
As a logo, the favicon is therefore a visual element that must be part of a company’s graphic charter.
The main reason why your website should have a Favicon is to improve the user experience.
This is a point to consider for the SEO of your website since Google tends to put it more and more forward.
It is much easier and faster to spot the visual associated with a certain website at a glance rather than searching through different URLs and meta descriptions .
Today, you can find a Favicon on all mainstream business sites.
A Favicon is, therefore, a useful tool for websites of all kinds.
A Favicon for your website is not essential but it is highly recommended.
In summary, the Favicon is important to facilitate the rapid visual search of a website among the open tabs but also to sort through thousands of results on a search engine.
How to create a favicon?
Now that you know the usefulness 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 dimensions of the favicon are different depending on the main browsers such as Chrome, Firefox, IE, or Safari.
For example, the formats recommended by Microsoft for its browsers are 16 x 16, 32 x 32, and 48 x 48. Apple, on the other hand, recommends that the size of the favicon be 180 x 180.
How to get by with all these dimensions?
There are several favicon generators on the market which have the advantage of providing you with all the regulatory formats expected by the different browsers.
Most of them offer you to upload your image and in just a few clicks, you will be able to download your generated image in favicon with the different formats.
Favor images in square format
The last tip, if you have a logo that is rectangular, I advise you to create a simplified version of it in square format.
Indeed, as you could see on the various examples of 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? Don’t panic, it’s very simple. Here is the procedure to add your favicon on a WordPress site or on any other site using HTML.
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, simply add the following code in the HEAD section of your theme via the following path: appearance> editor> Header.
<LINK REL = ”SHORTCUT ICON” href =
Prestashop The easiest solution to integrate a favicon on a Prestashop online store is to go to your FTP and replace the favicon.ico file present in the “image” folder of your site.
As with WordPress, remember to rename your image to “favicon.ico”.
for website maintenance service contact us.