In web design, as you probably know, every detail matters. A person who has switched to your resource does not see each of the elements separately, but perceives the entire image as a package consisting of other small details. Thus, if you miss something in the process of developing your resource, this detail can later spoil the whole complex, the whole composition.
Such a trifle can be, for example, the background of a button, an incorrectly chosen font of some small element, and even a favicon. Indeed, see for yourself - large, well-known sites have an individual icon that indicates it in the "Bookmarks" section of the user's browser. Without it, the developers of the resource would not have been able to create the composition they were originally striving for.
Therefore, when creating a design for your site, you should take care of such a detail as the favicon. In this article, we will talk about how to match it to the general style of the resource, as well as what sizes this image should have.
Site icon
First, let's define what this element is. Right now, take a look at the title of your browser tab. As you can see, there is a small image to the left of it, indicating a simplified version of the resource's logo. The same picture is also near the name of the site displayed in the search results. This is what the user is guided by when they see the title.
Many webmasters understand that such a picture is needed - but few people know what favicon size for the site will be most appropriate. Therefore, in this article we will not only give information on how to make such an icon and how you can install it on your resource, but also talk about image sizes.
The purpose of the favicon
So, the picture near the site header is used for identification. This is its original purpose: to express the site whose name we see, and to make it stand out in the eyes of the rest. This is done as simply as possible through the use of graphics: we intuitively perceive information in pictures much faster and easier than in text format. Favicons help us do just that. But do not forget that the size of the favicon is minimal in the eyes of the user. This is not a logo in the “header” of the site, which may contain additional information in the form of inscriptions, some clarifications or contact information. Everything that can be displayed in the icon next to the name should fit the size of the favicon as much as possible. And he, as already indicated, is simply miniature (only 16 by 16 pixels).
How to choosefavicon?
So how can a webmaster design an icon for his site? It should be noted that simply compressing the site logo, most often, will not work. On the emblems that are put in the form of a logo of a particular resource, various elements are often visible, which will not always be correctly displayed in a miniature form. It is better to immediately abandon such an undertaking.
Of course, the size of the favicon does not allow talking about simply inserting an inscription there. Any text will simply be invisible at this resolution. We need to develop a new icon that would convey the style of the site. To find solutions, again, let's turn to the largest sites.
Many people use the stylized first letter of the service name as a favicon. This is the way, for example, Bing, Yahoo, Yandex, Wikipedia, Google. There is another approach - if you have a short site name, you can set it as the background of your icon. In order for the size of the favicon (in pixels it reaches, I repeat, 16 by 16 pixels) to correctly display this inscription, it should be no longer than 3 letters. This is what, for example, the Aol service does.
How to create a favicon?
There are several ways to make an icon for the site name. Of course, the easiest is to work with different ready-made solutions. We can talk about some services or programs that allow you to make an icon from a full-fledged image by reducing it. However, I would recommend developing such a logo on your own. This will firstly givethe opportunity to learn something; and secondly, it will provide more tools. All you need to know for this is what to draw, and also know what size the favicon should be in the final version. We will talk about the icon size for the site a little later, but for now we will note some subtleties of working with such images. In particular, without mentioning the size of the favicon for the site, the format of such an image should be clarified. As experienced designers note, the picture must be saved as a-p.webp
You can save the picture, for example, using Photoshop, where the emblem will be drawn.
Favicon dimensions
So, now let's talk about how big the picture that we see next to the site name in the search results should be. By default, as already mentioned, its size is only 16 pixels (on each side). However, if you try to edit this image in Photoshop, you will see for yourself how inconvenient it is. Therefore, we recommend working with an enlarged picture, which in the future can simply be compressed along the edges and saved in the required format.
Multiplatform
However, speaking of how big the favicon should be on your site, there is one more thing to keep in mind. Not all platforms display a resource image in the same way. For example, devices with a Retina display “see” your favicon at 32 by 32 pixels. And in Safari and on the new Windows platform, and at all, these icons reach a size of 64pixels.
Therefore, we recommend that you save different versions of the icon and simply provide for its change depending on the user's platform in the future. Another interesting point - you can try to load the icon in the largest format, counting on the fact that it will “shrink” depending on the browser.
Outside editors
Of course, it's good if you're good with Photoshop and know what size the favicon should be and how to achieve it while saving your image. However, there are a lot of beginners who just haven't come across graphic editors so closely before, so they can't draw the desired image so easily. To help such webmasters, there are various services that allow you to automatically create the icon you are interested in. Many of them are even free, which does not require any investment from the user.
Sometimes you just need to register to work, but, as you understand, this is done once - after all, companies do not change their favicon so often. Take a look at Google, which changes the logo every day, but does not touch the icon.
How to install a favicon?
In general, setting up your site in such a way that it correctly displays the image you need is very simple. It is enough to perform a series of simple steps that will allow search engines, as well as simple browsers, to read the information.
To do this, the resulting image must be saved withnamed favicon.ico and placed in the root of your resource. That's it, now your image will be recognized automatically, and after some time it will be linked to your site.
In addition to this binding, you can add one more line that will “suggest” where your icon is located. It looks like this:
Install the code in the header of the site.
Conclusions
So, after reading our article, you figured out what size a favicon should be for a site and what it is. Also, I think you understood that finding the right icon for your resource is a necessity, because it plays into your hands both in terms of increasing recognition and in terms of some additional standout among your competitors. At least the largest sites do the same, which can be taken as a prime example. And besides, it does not cause much effort - having made a favicon once and installed it correctly on your site, you can forget about it for the next few months.
Therefore, feel free to experiment, come up with something new, try - and everything will work out!
