When creating a site it is extremely important to pay attention to the little things that play a role not only in terms of design, but also in promoting this site in search engines. One of these little things is favicon for the site. We will talk about how to create it and what size it should be.
What is favicon for a site?
It is a small picture that will be displayed in the browser tab. The favicon size is 16x16 pixels. Also, this picture is displayed in the results of search engine results, and if favicon is absent on the site, then next to the site the results will be empty. It is worth noting that the favicon helps the user find your site specifically among hundreds of others, so its presence on the site, although not mandatory, is strictly recommended. And yes, the favicon size does not have to be 16x16. Some webmasters make favicons 32x32 and even 64x64 in size. But in their recommendations, the search engines Google and Yandex write that the ideal favicon size is 16x16. Therefore, it is better to follow these tips from search engines.
How to create favicon?
There are several different ways to create this picture. The very first and easiest way to create a favicon is to steal it, for example, from an English site.
Suppose you have created a home appliance blog and set it up completely, but the final touch remains - the favicon. Write a search for appliances in a Google search and see the first 10 sites. The favicons of these sites are perfect for your new blog. If you like any picture, open the source code of the page and look for the favicon.ico entry. There will be indicated the address of the favicon locations. Open it and download it to your computer, then upload it to the website and connect (about the connection below).
The second way to create a favicon of 16x16 pixels is to use a special favicon generation service. It works according to the following principle: you upload an image (of any size and extension) that is suitable for the title icon of the site, and click on the Create Favicon button. In a second, you get a ready-made favicon that you can download, upload to your website and connect. The most popular service is the Favicon Generator.
Note that this service only slightly simplifies the process of creating icons. You can do the same yourself. Just find a picture that suits you, resize it to 16x16 pixels and save with the ico extension. All this is done in one minute in the Paint program.
There are other online favicon search services. There you need to write a keyword, and after that the service will display various thematic icons of the required size. In principle, this method also involves theft, like the first. But there is nothing wrong with that.
Connection
In order for the picture to be displayed in the browser in the tab and in the search engine results, it is necessary to connect it correctly. To do this, the file should be called favicon.ico and located in the root directory, that is, where the main site files lie.
Most often, these actions are enough to display favicons. Search engines (for example, Yandex) automatically recognize the presence of a favicon in the root directory and use it in their search results. However, there are sometimes misunderstandings with Yandex. Many webmasters complain that favicons disappear from the index and then reappear. To prevent this from happening, you need to connect it.
To connect favicon, Yandex recommends using the <link> meta tag with specific attributes. This tag must be placed in the <head> section of the site.
All connection code should look like this:
<link rel = "icon" href = "/ favicon.ico" type = "image / x-icon">
This code works for search engines and all browsers. There may be display issues in Internet Explorer, but in all other browsers the display will be accurate.
Pay attention to the location of the image /favicon.ico. It can be made like this: /favicon.gif. Then you need to put an image with the extension .gif in the root of the site, otherwise the favicon will not be displayed. As you know, pictures in .gif format can be sliders. Webmasters use this and make animated favicons for their sites. It looks interesting, but nothing more.
Favicon as a tool for website promotion
Considering the fact that this icon will be displayed in Yandex search results, it is highly desirable to use it. This is one of the main tools for increasing clickability, because users are likely to click on a site near which there is an attractive image, and not an empty place.
Therefore, it is important not just to use any favicon, but a beautiful icon that users want to click on. It should also be replaced depending on the situation. For example, on the eve of the New Year, it is desirable to make your favicon New Year's, which will provide better clickability.
How does the Yandex search engine understand favicons?
The search engine has a special robot that is responsible for updating the favicons. This robot, on a certain schedule, visits sites, requesting the main page and looks in the code for a path indicating the location of favicon.ico. If he does not find this path, then he tries to download the icon from the parent directory, so most often it is enough to just put the file with the name favicon.ico in the parent directory. Then the resulting icon is uploaded to the Yandex server and displayed in the search. If its size is larger, then it will be pre-converted to 16x16, and the extension will change to png. The robot periodically checks the sites for changes in the favicon. He usually visits updated sites once a month. This can be seen experimentally: change the favicon of your site, and after about a month it will appear in the Yandex search engine indexes.
Conflict Icons
It is worth noting that sometimes webmasters are faced with a conflict of favicons, because of which one or another icon appears in the index. This is possible if you upload one image to the parent directory and specify the path to another favicon in the page code template. Therefore, make sure that you do not have a conflict between the addresses of favicons.
Now you know what a favicon is and how to connect it correctly. Of course, this is not necessary at all, because the site will work even with it, although without it. But in order to search engine optimization and improve clickability from the search engines, its connection is recommended.