- PrestaShop Blog and Ecommerce Tutorial
Attention to detail is essential for companies and individuals who have a website or an online page. The relationship between the graphic quality of your website and the ability to attract users is extremely evident when you think about the settings given by the most important browsers. Among the most interesting elements that bind to this relationship are the favicons, essential graphic elements that accompany users in their internet browsing and a real springboard for companies that want to give constant reference to their supporters. In the next lines we will analyze the definition, features, advantages and dedicated software for creating a quality favicon.
What is a favicon
You are surely wondering what a favicon can be. From a purely technical point of view, this term defines an extremely small graphic element, usually identified as a logo, which is used by a web page or website to highlight its identity.
The word favicon is the fusion of the terms Favorites and Icon, as it is easy to deduce from the translation it identifies the graphic representation of an icon that you can use in your favorites. Initially the favicons were present only in the Microsoft Explorer browser for saving websites in the favorites bar, later also the other search software have implemented this functionality making it a standard.
What is a favicon for
The main function of a favicon lies in its ability to be recognized immediately. Thanks to the visual identification of the image, each user will know perfectly and quickly which site is associated, reducing search times and guaranteeing the site itself a well-defined brand identity.
In addition to the ease of identification in the canonical favorites bar, there is an immediacy in the interaction with the reference site even during navigation. In fact, it is only possible to recognize and interact with the site by looking at it, helping companies and individuals to improve brand building.
The characteristics of a favicon
The definition highlights how this graphic element can improve the interaction between user and reference site, but what are the ideal technical characteristics to make the most of its potential?
Technically a favicon has a graphic of 16x16 pixels, but it is not difficult to create a larger one, for example 128x128 pixels, since the system used for your source code will resize the image appropriately.
Considering Microsoft's standards, you can also create favicons with dimensions of 64x64, 32x32 and 24x24 pixels depending on where you need it to identify itself better. Specifically, the optimal display of a favicon on Microsoft Edge is 16x16 pixels in the address bar, 32x32 pixels in the new tabs and 24x24 pixels in the browser bar.
Aspect you need to pay attention to is the reference extension , a favicon has an ICO extension, ideal just for creating very small images. If your reference software for creating favicons does not have this extension, you can still use the JPG and PNG formats, the latter particularly suitable if you want to make changes later and subsequently convert the ICO format .
The advantages of a favicon for companies and individuals
The increasingly widespread use of the creation of a favicon by companies and individuals is not absolutely accidental. An effective marketing strategy carefully optimizes every graphic aspect to attract a greater number of users. But what are the concrete benefits that an individual or a company can derive from the creation of a favicon? Let's see the main ones.
- Enhance the brand;
- Work optimization;
- Attract users;
- Simplicity of implementation.
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 greatly increases trust in that brand, enhancing it accordingly.
Work optimization: having a clear and distinguishable icon in the favorites bar is essential to optimize work times. More and more people work in smart working and optimizing the time available is essential to obtain results. A quality icon allows you to better manage the work phases.
Attracting users: visual perception is an essential component for companies that want to attract new users. People tend to bind themselves to a graphically pleasing website not only in navigation, but also in attention to detail, becoming affiliated over time.
Cost: one of 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 than one without spending a lot.
Ease of implementation: creating a favicon is extremely simple even for those unfamiliar with photo editing software. The small size is not a limit and you can experiment with different formats according to your needs.
How to create a favicon
Having taken note of the advantages you could have from a favicon, it is advisable to understand what are the methods to create a quality one. Although on the web there are several online sites capable of creating a custom favicon, we can use common photo retouching programs - seen in this guide - or much more suitable vector graphics programs such as Adobe Illustrator , Corel Draw or Inkscape . Since it is mainly a logo, vector graphics are the most suitable, we can then 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 to generate a specific icon for each platform. We will also be able to test our e-commerce in Prestashop or our company site in WordPress, in order to verify if the implementation of the favicon is correct.
Pure PrestaShop offers a conversion service: https://addons.prestashop.com/en/create-favicon.php?pab=1
An effective marketing strategy and a quality brand identity go through attention to detail. While many find it superficial to create a favicon for their website, it can actually make a difference. The advantages, as highlighted in the previous paragraph, are considerable and not making the most of them would be a real shame. Not to mention that any SEO optimization tools will report the lack of this important icon, which should now be extended through the adoption of Touch Icons for mobile devices. The touch incon allow your customer to add your ecommerce to the home of their device, which will appear as an APP. Our ArtWebMaster module allows you to insert Touch Icons in PrestaShop. The Template Warehouse already integrates the function, in the module: IqitThemeEditor - Backoffice.
To insert the favicon in PrestaShop 1.7 just go to: Design -> Theme & Logo
Author: Loris Modena