Favicon size for the site

In web design, as you probably know, every detail is important. A person who has passed 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 while developing your resource, this detail in the future can spoil the whole complex, the whole composition.

Such a trifle can be, for example, the background of a button, an incorrectly selected font of some small element and even a favicon. Indeed, look yourself, the large, well-known sites have an individual icon that stands for it in the "Bookmarks" section of the user's browser. Without it, the developers of the resource would not be able to create the composition to which they aspired initially.

Therefore, you, while creating a design for your site, should take care of such details as the Favicon. In this article we will talk about how to select it under the general style of the resource, as well as what size this image should have.

Site Icon

First, we determine what is this element. Right now look at the name of the tab of your browser. As you can see, to the left of it there is a small image denoting a simplified version of the resource logo. The same picture is also near the name of the site displayed in the search results. It is on it that the user is oriented when he sees the title.

Many webmasters understand that such a picture is needed - but very few people know what size favicon for the site will be most suitable. Therefore, in this article we not only give information on how to make such an icon and how you can install it on your resource, but also tell you about the size of the image.

The purpose of the favicon

So, the picture near the title of the site serves for identification. This is its original purpose: to express the site, the naming of which we see, and to distinguish it in the eyes of the others. This is done as simply as possible by using graphics: we intuitively perceive information in pictures much faster and easier than in text format. Favicons help us in 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. All that can be shown in the icon next to the name should be as close to the size of the favicon. And he, as already indicated, is just a miniature (only 16 by 16 pixels).

How to choose a Favicon?

So how can a webmaster develop an icon for his website? It should be noted that simply to squeeze the logo of the site, most often, will not work. On the emblems, which are put in the form of a logo of a particular resource, often different elements are visible, which will not always be displayed correctly in a 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 use in the form of a favicon stylized the first letter of the name of the service. This is what Bing, Yahoo, Yandex, Wikipedia, Google do, for example. There is another approach - if you have a short site name, you can set it as the background of your icon. To the size of the favicon (in pixels it reaches, I repeat, 16 by 16 points) allowed to display this inscription correctly, it should not be longer than 3 letters. This is the case, for example, of the Aol service.

How to create a Favicon?

You can make an icon for a website name in several ways. Of course, the simplest is to work with different ready-made solutions. It can be about any services or programs that allow you to make a full icon from an icon by reducing it. However, I would recommend that you develop this logo on your own. This, first, will provide an opportunity to learn something; And secondly, it will provide more tools. All you need to be able to do this is what to draw, and also to know what size the favicon should be in the final version. About the size of the icon for the site, we'll talk a little later, but for now, note some of the subtleties of working with such images. In particular, without mentioning the size of the favicon for the site, you should specify the format of this image. As noted by experienced designers, the picture should be saved as .PNG (24-bit), or as a file.ICO.

You can save the picture, for example, using Photoshop, where the emblem will be drawn.

Favicon size

So, now let's talk about how big the image should be, which we see next to the name of the site in the search result. 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 this 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.

Multiplatform

However, speaking about the size of the favicon should be on your site, one more thing to remember. Not all platforms display the resource image in the same way. For example, devices with a Retina display "see" your favicon at a rate 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 provide for its modification, depending on the user's platform. Another interesting point - you can try to download the icon in the largest format, expecting that it will "shrink" depending on the browser.

Extraneous editors

Of course, it's good if you understand Photoshop and you know what size of the favicon should be and how to achieve it, saving your image. However, there are a lot of newcomers who simply did not come across graphic editors so tightly before, so they can not just draw the image they want. To help these webmasters, there are various services that allow you to automatically make an icon of interest to you. Many of them are even free, which does not require any investment from the user.

For work, sometimes you just need to register, but, as you know, this is done once - after all, not so often companies change the Favicon. Look at least at Google, which changes the logo every day, but does not touch the icon.

How to install the Favicon?

In general, to customize your site in such a way that it correctly displays the image you need, it's 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.

To do this, the resulting image must be saved with the name favicon.ico and placed in the root of its resource. Everything, now your image will be recognized automatically, and after some time it will be tied to your site.

In addition to this binding, you can add one more line that will "prompt" 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 the size of the favicon for the site and what it is. Also, I think you realized that finding the right icon for your resource is a must, because it plays into your hands both in terms of increasing recognition, and in terms of some additional allocation among your competitors. At least, the largest sites do the same thing, which can be taken as a vivid example. And then, it does not cause any special effort - after making the Favicon once and installing it correctly on your site, you can forget about it for the next few months.

Therefore, experiment boldly, come up with something new, try and everything will turn out!