Currently, no site is complete without a favicon. Standard icons are incorporated when creating the site. Only they do not always suit the user. The problem is that not every resource owner knows how to add a favicon. The action is not so complicated. But the result will allow you to identify the site among several others in the SERP. After all, the keywords can be similar, but the favicon will not let you down. It is his addition that often explains the decision of the visitor to go to the resource.
Favicon for site
Before you place a favicon on a site, you need to create it. To do this, you can choose one of the proposed options:
- Order a layout from a designer.
- Create your own on online services on the Internet.
- Create yourself in Photoshop.
The standard image is saved with the extension ICO. Its size is desirable to choose 16x16 pixels. There are sizes and more. They are needed when the user saves the page on the desktop.
Next, place the picture in the root of the site. To do this, enter the line http://site.ru/favicon.ico, where instead of:
- site.ru register the name of your own resource;
- favicon.ico enter the name of the file with favicon.
For proper reflection in the search engine, you must enter the image in the code. To download, use the <head> </head> tag. The line <link rel = "shortcut icon" href = "/ favicon.ico" type = "image / x-icon" /> is inserted into it. There is another option - <link rel = "icon" href = "/ favicon.ico" type = "image / x-icon" />.
After that, the developed logo will be installed. You can see it both on the site and in the search results. There is an icon in front of the resource address.
Favicon and browsers
Before you add a favicon, you should decide on its extension. It can be:
But different browsers support various extensions. Which browser is loyal to what favicon format will be shown in the table below.
Browser type | ICO | Svg | PNG | APNG | GIF | GIF animated | Jpeg |
Internet explorer | 2 | 3 | 1 | 1 | 1 | 1 | 1 |
Google chrome | 3 | 3 | 2 | 1 | 2 | 1 | 2 |
Firefox | 2 | 1 | 2 | 2 | 2 | 3 | 3 |
Opera | 2 | 2 | 2 | 2 | 2 | 2 | 2 |
Safari | 3 | 1 | 2 | 1 | 2 | 1 | 2 |
1 - does not support;
2 - not all versions are supported;
3 - supports all versions.
Because many still prefer the standard format. By adding such a favicon, you will not have to worry about the type of client browser. If you do not take into account the age, professional and other preferences of the audience before adding a favicon, you can remain without a logo.
If you want to add some favicons
Sometimes there is a desire or need to add a small image for each page or to make different formats for viewing on different browsers. In this case, to the question of how to add a favicon as a standard, you need to add a couple more strokes.
Writing a favicon insert at the root of the site is very simple. But this is not enough to create several extensions. To do this, insert <link rel = "icon" type = "image / ico" href = "http: //your_site/favicon.ico" /> in the HTML code, pre-framing the string <head>.
When creating this design, remember that for Internet Explorer the word icon is not enough. You must enter a shortcut in front of it. In this case, the standard browser will respond to the phrase, and the rest - only to the last word.
There are many questions on the forums on how to add a favicon to Yandex. If the image is added to the root of the site, then registration is not needed. Robots will find it by default.
Added and lost
It happens that all actions are done correctly, but when checking in search engines there is no picture. After all, the main thing is not how much to add, but how to add a favicon. In Yandex.Direct, if properly added, image moderation will take from 2 to 4 weeks. At this time, the site will be displayed without a favicon. It is also worth mentioning that when the site is in a low position, the icon may not be reflected at all.
If the time has passed and there is no icon, the extension may not correspond to the browser. You can check for a favicon:
- for Yandex - http://favicon.yandex.net/favicon/site_address;
- for Google, http://www.google.com/s2/favicons?domain=site_site.
After recognition by the system, the favicon will become an integral part of the site and the image of the company. Therefore, it’s worth the responsibility to add it. A correctly selected and correctly added icon will become a guiding light for customers. And this means an increase in conversion and, consequently, a large profit.