In web design, as you probably know, every detail matters. The person who switched to your resource does not see each of the elements separately, but perceives the whole image with a package consisting of other small details. Thus, if you miss something in the process of developing your resource, this detail can further ruin the whole complex, the whole composition.
Such a trifle can become, for example, the background of the button, the incorrectly selected font of some small element, and even the 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 to which they initially sought.
Therefore, when creating a design for your site, you must take care of such a detail as a favicon. In this article we will talk about how to choose it for the general style of the resource, as well as about what sizes this image should have.
Site icon
First, let's determine what this element is. Right now, take a look at the name 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 logo. The same picture is near the site name displayed in the search results. It is on it that the user is guided when he sees the title.
Many webmasters understand that such a picture is needed - but few people know what size of favicon for the site will be most suitable. 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 the size of the image.
Favicon destination
So, the picture near the site header serves for identification. This is its original purpose: to express the site, the name of which we see, and highlight it in the eyes of the rest. This is done as simple as possible through the use of graphics: we intuitively perceive information in pictures much faster and easier than in text format. The favicons contribute to this. 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 shown in the icon next to the name should maximize the size of the favicon. And it, as already indicated, is simply miniature (only 16 by 16 pixels).
How to choose a favicon?
So how can a webmaster design an icon for his site? It should be noted that simply compressing the logo of the site, most often, will not work. On the emblems, which put in the form of the logo of a particular resource, often visible are various elements that will not always be correctly displayed in miniature form. It is better to immediately abandon such an undertaking.
Of course, the size of the favicon does not allow us to talk about simply inserting an inscription there. Any text will be simply 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 done, for example, by 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. So that the size of the favicon (in pixels it reaches, I repeat, 16 by 16 points) allows this inscription to be displayed correctly, it should be no longer than 3 letters. This is the case, for example, with the Aol service.
How to create a favicon?
There are several ways to make an icon for a site name. Of course, the simplest is working with various ready-made solutions. We can talk about some services or programs that allow you to make an icon out of a full-fledged image by reducing it. However, I would recommend developing this logo on your own. This, firstly, will provide an opportunity to learn something; and secondly, provide more tools. All you need to be able to do is draw, and also know how big the favicon should be in the final version. We will talk about the size of the icon for the site a little later, but for now, we’ll 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 should be saved as .PNG (24-bit), or as a .ICO file.
You can save the picture, for example, using Photoshop, where the logo will be drawn.
Favicon dimensions
So, now let's talk about how big the picture should be, which we see next to the name of the site in the search results. By default, as already mentioned, its size is only 16 pixels (on each side). However, if you try to edit this image in Photoshop, see for yourself how inconvenient it is. Therefore, we recommend working with an enlarged picture, which in the future can be simply compressed around the edges and saved in the required format.
Multi-platform
However, speaking of how big the favicon should be on your site, one thing to keep in mind. Not all platforms display a picture of a resource in the same way. For example, devices with a Retina display “see” your favicon in the amount of 32 by 32 pixels. And in Safari and on the new Windows platform, and at all, these icons reach a size of 64 pixels.
Therefore, we recommend that you save different versions of the icon and, in the future, simply foresee its change depending on the user's platform. Another interesting point - you can try to download the icon in the largest format, hoping that it will “shrink” depending on the browser.
Outside Editors
Of course, it's good if you understand Photoshop and know what size the favicon should be and how to achieve it while maintaining your image. However, there are a lot of newcomers who simply did not encounter graphic editors so tightly before, so they can not so easily draw the desired image. To help such webmasters, there are various services that allow you to automatically make the icon you are interested in. Many of them are even free, which does not require any investments from the user.
To work, sometimes you just need to register, but, as you know, this is done only once - because companies do not change the favicon so often. Take a look at Google, which changes the logo every day, but does not touch the icon.
How to install favicon?
In general, setting up your site so that it displays the image you need is very simple. It is enough to perform a number of simple actions that will allow search engines, as well as simple browsers, to read information.
For this, the resulting image must be saved with the name favicon.ico and put in the root of its resource. That's it, now your image will be automatically recognized, and after some time it will be attached to your site.
In addition to such a binding, you can add another line that will “prompt” where your icon is. It looks like this:
<link rel = "shortcut icon" href = "icon address” />
Install the code should be in the header of the site.
conclusions
So, after reading our article, you figured out what size the favicon for the site should be and what it is all about. Also, I think you understand that the search for a suitable 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 emphasis among your competitors. At least, the largest sites do the same thing that can be taken as a vivid example. And then, it doesn’t cause much effort - by making a favicon once and installing it correctly on your site, you can forget about it for the next few months.
So feel free to experiment, come up with something new, try - and everything will work out!