.
It’s only when you have to create and manage a website that people realize how many “details” need some attention. Amidst the long list of issues involved, one item is sometimes overlooked, but which is of special relevance – the favicon.
If you are taking the first steps in this area of creating and managing your website, it is likely that you have some questions on the subject and therefore, our focus with this post is to answer all, or at least the most frequent and important ones. .
What is favicon?
Favicon is a word that came from the junction of two English words – favorite + icon – and which mean favorite and icon.
It is an image file with some special features:
- Square – has the same measurements for the height and width of the image and is determined in pixels;
- Measurements – depending on the use, the size may vary, with the smallest and most commonly used having 16X16 pixels and their multiples (32×32, 48X48, …);
- Transparency – allows the use of transparency for viewing over different backgrounds;
- Formats – there is a standard and own format (.ico), however, currently several browsers accept other formats for display, such as .gif, .png, .svg, .bmp and .jpg, the last three being less common.
- Size – it is a file of reduced size in terms of the space it takes up for storage, both because the measurements are usually small, and because it is suitable for its loading to be fast;
- Icon – looks like many of the icons that have long been used to associate, for example, operating system programs and therefore partly explains the reason for its name, but which you will understand better below.
Its use has expanded over the years, but initially it only appeared in the top bar of the browser, next to the website name or next to the address bar. The position could vary according to the browser and even its version. Soon most of them also started to display the favicon next to the site name in the favorites list, which explains why the favorite icon.
Why is he important?
Since the tabs/tabs feature became available in different browsers, favicons are now displayed next to the site name on each tab.
If you’ve ever had a browser window with many tabs open, each relating to a different site, you may have noticed that as its width shrinks to accommodate new tabs, the site’s name is hidden and only the relative icon is displayed.
Therefore, the favicon in this condition plays the role of helping to visually identify which site corresponds to each tab, without having to place the mouse cursor over each one to know which site it refers to.
In a way, this almost “forces” the visitor to remember which favicon corresponds to each site and therefore helps to make a mental association of the image with the site, which is particularly desirable when the favorite icon is the same as the logo.
Note that it is a process similar to what we already do with icons in other situations, such as on your desktop or notebook operating system, or even on your smartphone’s Android or iOS.
Going further, among the many aspects of branding work that brands do, the favicon is one of the visual elements, along with colors, fonts and logo, in the composition of the visual identity in the minds of consumers.
And if that weren’t enough reasons, favicons have also been used in website shortcuts that can be configured on browser home pages, such as in Microsoft Edge, in shortcuts created on the desktop, in links shared by some apps and even next to the site name on Google and Microsoft Bing search engine results pages (SERPs).
Therefore, it helps to quickly and visually identify the respective site in a number of situations. Each user view is a new opportunity to bring your brand to the visitor’s mind.
What care should you take when creating a favicon?
As with any image used on the Internet, care must be taken when creating a favicon.
As we mentioned, in its use in the tabs of a desktop/notebook browser, the commonly displayed resolution is the minimum and that is 16X16 pixels.
But on smartphones, depending on the size of the screen and its resolution, 48X48 pixels is indicated.
Remember that enlarging an image implies a loss of visual quality. Therefore, it is recommended to start with higher resolutions in such a way that when it is necessary to display in higher resolution, this loss does not occur.
In general, in addition to the resolutions that will be necessary, it is necessary to pay attention to the following aspects:
- Color Quantity – especially at lower resolutions, there is a loss of image sharpness / definition as more colors are used, so choose to use images with less color quantity;
- Palette – naturally, the color palette used on the website and brand materials is the starting point for its creation, however, it is necessary to be aware of situations such as anonymous or private browsing and that generally in browsers makes use of a dark theme and which results in poor contrast for favicons with dark palettes;
- Proportions – the square (same measurements for height and width) is the favicon’s default, which is why a rectangle or other format that is not square, will cause damage to the visualization. Imagine a rectangular logo, whose width is much greater than its height, in the process of reducing the visual definition will be affected;
- Logo – it is common to make use of the logo to produce the favicon, however, if it does not meet the above requirements, the end result may not be suitable. In these cases, it is recommended to produce an alternative that refers to the logo or another aspect of the brand’s visual identity;
- Fonts – when creating favicons that make use of fonts, it is necessary to pay attention to what we have already warned about the definition, as readability will be affected. More than two letters is not common precisely for this reason, as is the case with web host’s favicon;
- Transparency – some of the image formats that can be used allow you to use the transparency feature, which means that certain areas of the image can take on the background color. It can be a big problem if the background color is the same or even close to the elements that are not transparent;
- Matrix – whatever the sizes of icons produced, the matrix image, which will later be used to produce smaller versions, should start from 512X512 and have a maximum of 1024 KB, much less is recommended if possible;
- Vector – give preference to creating the matrix in a vector format (PNG or SGV), to the detriment of formats based on bitmaps (GIF or JPG), because when it is necessary to resize, there is no loss of image quality / definition;
- Format – There are browsers that are capable of rendering different formats of images, but not all. So, if you don’t want to run the risk of not having the favicon displayed on any, especially those used on mobile devices, prefer to use .ico, which is compatible even with very old browsers.
How to create a favicon?
The ideal is to use an image editor that offers resources, such as Photoshop or Gimp. But even if you don’t have any, there are good options for image editors online, and some even allow you to save in .ico format.
The biggest advantage of the mentioned programs is that when creating a .ico file, you can save images in different resolutions in the same file (16X16, 48X48, 96X96, …).
If the website/company logo already has appropriate characteristics – it is square, has good resolution and few colors – you can use it as a starting point. However, if you are going to create one specifically for use on the site, keep in mind the precautions listed above, especially those related to the matrix.
The SVG and PNG format, are the ones that produce the best visual results, especially in the face of resizing and for various uses, whose sizes vary. However, it is important to remember that eventually some browsers, especially older ones, may not display them.
Alternatively, there are online services through which you can create favorite icons in different resolutions, as well as formats, from an image, which can be your logo, for example:
How do I put the favicon on my website?
The first step is to upload it via FTP to the root directory of your website.
It is not necessarily required to be in the root, but suppose that a visitor directly accesses the URL of an image, clicking to open it in a new tab. In this case, the favicon will not appear in the open tab. But if he is at the root, yes!
It is also recommended to use the default naming convention, ie favicon.ico.
Finally, you must include the following line, which must be between the site’s HEAD tags:
<link rel="shortcut icon" href="https://www.mysite.com/favicon.ico" type="image/x-icon" />If the file is not in the root, the path to the folder must be in HREF.
Conclusion
The favicon is an essential feature of the websites and it contributes to their visual identity and even facilitates their access and web browsing.
.
