Shopping Cart
There are no more items in your cart
- Tecnoacquisti.com
- PrestaShop Blog and Ecommerce Tutorial
Discover the features and favicon sizes, how to create it, why it is important, and how to insert it into your website or ecommerce
Attention to detail is essential for companies and individuals who have a website or an online page. The relationship between the graphic quality of one's website and the ability to attract users is extremely evident when considering the settings provided by the most important browsers.
Among the most interesting elements related to this relationship are favicons, essential graphic elements that accompany users in their internet navigation and serve as a true launching pad for companies that want to provide a constant reference to their supporters. In the following lines, we will analyze the definition, characteristics, advantages, and dedicated software for creating a quality favicon.
Characteristics and dimensions of a favicon
The definition highlights how this graphic element can improve the interaction between the user and the reference site, but what are the ideal technical characteristics to make the most of its potential?
- Dimensions;
- Extensions.
Technically, a favicon has a graphic size of 16x16 pixels, but it is not difficult to create one with larger dimensions, for example, 128x128 pixels, since the system used for its source code will appropriately resize the image.
Considering Microsoft's standards, you can also create favicons with sizes of 64x64, 32x32, and 24x24 pixels depending on where you need it to be more identifiable. Specifically, the optimal display of a favicon on Microsoft Edge is 16x16 pixels in the address bar, 32x32 pixels in new tabs, and 24x24 pixels in the browser bar.
An aspect you need to pay attention to is the reference extension; a favicon has an ICO extension, which is ideal for creating very small images. If your software for creating favicons does not have this extension, you can still use JPG and PNG formats, the latter being particularly suitable if you want to make changes later and subsequently convert to ICO format.
A favicon is a small icon associated with a website, typically displayed in the browser's address bar or tab, as well as in bookmarks. It helps users easily identify and recognize a website.
You are probably wondering what a favicon is. From a purely technical point of view, this term defines an extremely small graphic element, usually identified as a logo, that is used by a web page or website to highlight its identity.
The word favicon is a fusion of the terms Favorites and Icon, as can be easily deduced from the translation, it identifies the graphic representation of an icon that you can use in your favorites. Initially, favicons were only present in the Microsoft Explorer browser for saving websites in the favorites bar; later, other search software also implemented this functionality, making it a standard.
What is a favicon used for?
The main function of a favicon lies in its ability to be recognized immediately. Every user, thanks to the visual identification of the image, will know perfectly and quickly which site is associated, reducing search times and ensuring the site itself has a well-defined brand identity.
In addition to the ease of identification in the standard favorites bar, there is an immediacy in interacting with the reference site even during navigation. In fact, it is possible to recognize and interact with the site just by looking, helping companies and individuals improve brand building.
The advantages of a favicon for businesses and individuals
The increasingly widespread use of creating a favicon by companies and individuals is certainly not accidental. An effective marketing strategy carefully optimizes every graphic aspect to attract a larger number of users. But what are the concrete benefits that an individual or a company can gain from creating a favicon? Let's see the main ones.
- Enhancing the brand;
- Work optimization;
- Attracting users;
- Cost;
- Simplicity of creation.
Enhancing the brand: users on the web are very attached to the graphic aspect of a digital context. The possibility of having a clear and attractive icon significantly increases trust in that brand, thereby enhancing it.
Work optimization: having a clear and distinguishable icon in the favorites bar is essential for optimizing work time. More and more people are working remotely, and optimizing available time is crucial for achieving results. A quality icon allows for better management of work phases.
Attracting users: visual perception is an essential component for companies that want to attract new users. People tend to connect with a visually appealing website not only in navigation but also in attention to detail, becoming affiliated over time.
Cost: among the most relevant advantages of a favicon is its cost. In fact, thanks to the many software available, it is possible to create one or more without spending much.
Simplicity of creation: creating a favicon is extremely simple even for those who are not familiar with photo editing software. The small size is not a limitation, and you can experiment with different formats according to your needs.
How to create a favicon
Having acknowledged the advantages you could gain from a favicon, it is important to understand the methods for creating a quality one. Although there are various online sites capable of creating a customized favicon, we can use common photo editing programs - as seen in this guide - or much more suitable vector graphic programs such as Adobe Illustrator, Corel Draw, or Inkscape. Since it mainly concerns a logo, vector graphics are the most appropriate; we can then also transform our icon into touch icons for Android and iPhone.
A very useful online service is https://realfavicongenerator.net/, which will allow us not only to convert our favicon into the correct format but also to generate a specific icon for each platform. We can also test our ecommerce in Prestashop or our corporate site in WordPress to verify if the implementation of the favicon is correct.
PrestaShop also offers a conversion service: https://addons.prestashop.com/en/create-favicon.php?pab=1
Conclusion
An effective marketing strategy and a quality brand identity come through attention to detail. Although many consider the creation of a favicon for their website superficial, it can actually make a difference. The advantages, as highlighted in the previous paragraph, are significant, and not making the most of them would be a real shame. Not to mention that any SEO optimization tools will flag the absence of this important icon, which should now be extended through the adoption of Touch Icons for mobile devices. Touch Icons allow your customer to add your ecommerce site to their device's home screen, appearing like an APP. Our ArtWebMaster module allows the insertion of Touch Icons in PrestaShop. The Warehouse Template already integrates this function in the module: IqitThemeEditor - Backoffice.
To insert the favicon in PrestaShop 1.7, simply go to: Design -> Theme & Logo
Author: Loris Modena
SENIOR DEVELOPER
Per Ind Loris Modena, owner of Arte e Informatica, started working in the IT sector in 1989 as a system administrator responsible for the maintenance and installation of computer systems. He began programming for the web in 1997, focusing on CGI programming in PERL and later transitioning to programming in PHP and JavaScript. During this time, he became familiar with the Open Source world and the management of Linux servers.