Favicon size for the site

In web design, as you probably know, is importantevery detail. 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 entire composition.

Such a trifle can be, for example, the background of a button,incorrectly selected font of some small element and even a favicon. Indeed, look yourself, large, well-known sites have an individual icon, which 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, creating a design for your site,should take care of such details as the Favicon. In this article, we'll 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 isthis item. 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 pictureNeed - but few people know what size favicon for the site will be the 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 foridentification. 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 quicker 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 developicon for your site? It should be noted that simply to shrink the logo of the site, most often, will not work. On the emblems that 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 speakingand about simply inserting an inscription there. Any text will be simply invisible at this resolution. It is necessary 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 stylizedthe first letter of the service name. 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 what the Aol service does, for example.

How to create a Favicon?

Make an icon for the name of the site you canin 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 second, 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 logo will be drawn.

Dimensions of the favicon

So, now let's talk about how bigthere must be a picture that we see next to the name of the site in the SERP. 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 uncomfortable 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.

Multiplatform

However, speaking about the size of the faviconshould be on your site, you need to remember one more thing. Not all platforms display the resource image 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 keep different versionsicons and in the future simply provide for its change 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 Photoshopand you know what size the Favicon should be and how to achieve it, preserving its image. However, there are a lot of newcomers who just did not come across graphic editors so tightly before, so they can not just draw the right image. 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 the 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, set up your site in such a way thatit correctly displayed the image you need, very simply. 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 is necessarySave it with the name favicon.ico and put it in the root of your resource. Everything, now your image will be recognized automatically, and after some time it will be attached 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 withthe 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.

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