Where Favicon is prescribed. If you want to add several Favonov. Other graphic Favon formats

Favicon. - This is a small picture of 16x16 (or 32x32) pixel, which is in the browser to the left of the address string. For some reason not so much people add Favicon to your sites. In my opinion, they lose a lot. For example, in Yandex Website icons are displayed, and people go to such sites much more often than those on which there are no favicon.. Also, in my opinion, this slightly increases the authority of the site. In general, in this article we install Favicon on site.

To begin with favo Favicon.. First, you can create yourself. Highly good service Favicon.cc. On it you are right online create yourself Favicon. You can also take advantage of ready-made collections and choose the appropriate. The easiest way is to use the search and request: " collection Favicon."I think that the first site will show you thousands of different favicon.And you will just choose it.

Now the second step - installing Favicon to the site. To do this, add inside the tag next line:

I advise you to place favicon. Right to the root of the site. If you decide to place it elsewhere, then, accordingly, change the attribute value " href.".

After upgrading the page, you will see your favicon. Next to the address of your site.

Sometimes favicon. It does not appear immediately. As a rule, browser caching is guilty. Therefore, if there is no picture, then try to clear the cache of the browser (this should be in the settings). A restart of the browser can also help. But I say again: if you did everything right, then favicon will appear on your site.

Fast navigation on this page:

The question of how to establish Favon to the site is quite simple, but for some reason, many webmasters are neglecting this issue and do not install the icon for their website. About why it is still important and how to do it - read below.

Why do I need Favicon?

Favicon is an icon that has 16 format 16 on 16 pixels and is displayed at the top of the browser tab next to the site name / page. If the icon is not specified or is not correct, then the browser icon (for example, the Firefox or Google Chrome icon) is simply drawn in the browser (for example, Firefox or Google Chrome).

However, in reality, the role of this picture consists not only in the decoration of the browser. The fact is that these pictures are displayed in the search results of Yandex (if the icon is not specified - the empty place is shown). Imagine that Yandex will offer the user to his request two approximately the same site, but an additional icon will be added to one of them - on which site is more likely to go to the user? Of course, first of all, he will go to the site proposed by the first on the list, but just the presence of a picture, which is always more pleasant to the user than the text, can attract the visitor to your site.

In addition, it is impossible to exclude the fact that the presence or absence of Favonki may be taken into account by Yandex as one of the minor ranking factors. It is not known reliably, but if Yandex takes into account more than 300 different factors when ranking sites in search results, then perhaps the presence of an icon can also be taken into account when determining the quality of the resource.

Thus, if you make a good and high-quality site, then the icon should necessarily be affixed.

About how to make an ICO icon, we have a separate article (), therefore we will immediately go to the consideration of the question of what Favon should be.

What should be the file with the icon and where should it be?

Historically, there is a format.ico for sites. The peculiarity of this format is that there are several pictures of 16x16 to 64x64 in size within one .ico file (the size must be multiple eight). True, only 16x16 format is used for websites - neither Yandex nor the browser will show another size icon.

The corresponding file in format.ico can be created using graphic Editor or multiple online services available. It is important that this file had a name Favicon.ico.

Theoretically, you can save the file in any folder with the site files, but it is extremely recommended to save it in the root directory of your resource - so that it is always available at the address Vash-site.ru/favicon.ico, since the default search engines are looking for it and browsers.

How to add to the site?

Adding an icon for your resource is very simple: just to register the necessary HTML code between the tags

To add Favicon HTML code as follows:

After adding this code on the page pages of your page, update your browser's cache (it must be completely erased), and if everything is done correctly and the file with the picture is loaded to the site, the picture starts displaying in the browser.

True, do not wait for her instant display in the search results of Yandex. The fact is that this search engine for Favonok has a separate robot, which can update its base icons for several months. In this regard, your icon may appear in the issuance of Yandex as two weeks later, and in a couple of months, you should not worry about this.

Favon - English word Favicon, translates the "icon to favorites" (reduced by Favorites icon), site logo and one of the main parts of the web page, graphic picture with 16x16 or 32x32 pixels (size must be short eight). For Favona, 16x16 format is used, other dimensions will not be issued by browsers. It is displayed in the top line of the browser, close to the site address. If the icon does not install or make it wrong, then the site logo will be visible in the browser window, but the icon of the used browser.

Why do I need Favicon?

This drawing is not needed for the "decoration" of the browser. The presence or absence of Favicon on a web page is taken into account by Yandreck a behavioral ranking factor. All Favonons are shown by search engines, and the site looks more attractive in the gathering issue.

Example: to request a user, Yandreck offered two or more identical web pages. One of them has Favicon, which attracted it more than the standard text. Thanks to the logo, he moved to the view more likely site. If the reader adds such a site to the bookmark, the Favonka will be displayed in the strip, respectively, the person will not forget about such a page and increases clicability.

What should be Favon and where should be located?

For a good site, Favon must necessarily be mandatory. It is done in ICO format - this expansion is supported by all browsers. You can make a picture on your own by taking aside any photo or image. You can use a graphic editor, you can choose the appropriate option on any of the set of online services. And the easiest way to choose already ready, typing in the search bar "Favon Collection".

Please note: the image must be called Favicon.ico. In collections, options are very often offered options with the GIF extension, so download the picture and process it in the Snagit special program - Mouse over the image, right-click on the mouse using the Snagit application and save the picture as - choose the ICO extension.

Favon can be stored in any folder, but search engines and browsers, looking for emblems at this address website / FAVICON.ICO, so the logo is always available, it is recommended to save it in the root directory of the web page.

How to add Favon to the site?

Add Favicon to the site by 2 ways:
1. Saved picture with ICO expansion and size 16x16 pixels, overcame on Favicon.ico.
2. Load the icon in the master folder of the Domains / Your Website / Public_HTML / or in the hosting control panel.

On some sites, to complete the installation of the Favon, you need to enter the HTML code to the header file (header.php), between the tag.

After adding the code on its page, update or completely clean the cache of the browser used. If all actions have been completed correctly, then after APA, the picture will be visible in the browser.

Do not expect instant logo display in search results. In search engines for Favonok there are special robots that make updating their base for several months, so the issuance of the Fabique of your site in Yandex will be displayed at least two weeks later, a maximum in two months.

Hello everyone! In this article, you will learn what Favon is, for what he needs, how to create it and how to install Favon to the site. As the saying is a trifle, but nice.

What is Favon and what is it needed for?

Favon is an icon of our site, which is visible in the browser tab and is shown in the snippet (in search results) of some search engines. It's like a logo on a ballpoint handle, no one pays attention, and subconsciously perceived as a sign of distinction. For example, in Yandex, Favon is displayed, and there is no google, and for me personally it delivers a certain inconvenience.

As you can see in Yandex it is easier to find a site in the list, focusing on Favonos than in Google, looking at the usual text, and some kind of variety. Another reason why the site needs Favon, this is a possible factor ranging from Yandex. In his list, hundreds of factors, perhaps, Favon somehow affects the issuance. In any case, each respected and a decent resource on the Internet should have their own style, its logo and as a result of the difference sign, as a favicon.

How to create a favy for the site?

Now, when we sorted out and decided that we need Favon, we need to create it. Favon is a picture in ICO format. I will not paint you, what is this format. Favon is also allowed in GIF and PNG format, but not all browsers support Favon in such formats, so we will create a picture in all ICO format.

The picture should be 16x16 pixels. We will create it in Photoshop. You can create a picture in any other graphical editor, it does not matter, because we will still be removed into the ICO format, because Photoshop does not support this format.

Create a new 16x16 file and insert a picture there. The picture should be simple and with clear contours, so that it is clear what is shown there in small. Save the file in PNG format.

Now we need to convert the picture to the ICO format. We will do it with the help of online service Favicon.ru. We go to it and on the main page click on the "Select File" button.

We choose on the computer created by us, we wait a couple of seconds, press the "Next" button and look at us. Here you can correct a little, if you don't like something, make some sites transparent and if everything suits you, click on the button "Download Favicon" - "Download".

The minus of this service is that it is a transparent background fills in black. Just in case you have another service http://tools.dynamicdrive.com/favicon/. Here, too, everything is simple. Choose a file, click on the "Create Icon" button and after a couple of seconds you click "Download Favicon". But here it is impossible to edit, but the transparent background remains transparent.

Favon can not create yourself, but download ready-made pictures. On the Internet, many sites, where there are collection of Favonov, you need to find suitable and just download.

How to install Favon to the site?

Now that we have a file, you need to download it to our site. Check, just in case, that the file name is "Favicon.ico". We go to the server and pour the file to the root of the site. Updated optional to the root, but in the code we will specify a link to the root of the site.

Now you need to insert this code.

You need to paste it between the tags . I will show you on the example of all the favorite WORPDRESS. In the header.php file we are looking for (Ctrl + f) tag And immediately after it insert the code, as shown in the picture below.

In the rest of the engines, everything is individually, but the point is the same, you need to insert into the header of the site between the tags . Now you know how to create a Favon and how to add it to the site. This article will finish this article. I hope I explained everything is clear and accessible. If you have any questions left, ask them in the comments than I can, those help.

Favicon is a small image in the browser tab identifying your site. It also serves the addition of your site to the mobile device for quick access. The lack of Favicon from the site is one of the 25 most popular problems when creating a site.

When using premium, the most likely, this instructions do not need it, because In most topics that came across to my eyes, installing Favicon was available from the settings of the theme itself. Look carefully, most likely you will find the appropriate section and relieve yourself from reading the material.

Why do you need to add Favicon to your site?

As already written above, this icon allows you to identify your site among all other open in your browser window. I want to note that not all browsers show site icons, for example, Safari will not show, so you will not see them simply.

Look at the image and immediately understand how Favicon sites look like in Google Chrome, for example:

Or here is an example from another browser - vivaldi:

Each of these sites has its own unique icon and can be without any problems (knowing where whose) open the desired site, without turning over each tab and does not lead the header to the header. Everything like on the palm - you just need to remember the icons of the frequently used sites. If you are an active user of the Internet, then you most likely in each browser open 30-40 tabs. It would be very hard without icons ... :-)

How to create Favicon

In the simplest version, this is a square size icon, ideally 32x32 or 16x16 pixels, which can be done without any problems in Photoshop, or any other graphic editor. For simplicity - Create an image of 128x128 pixels, and then reduce the scale up to 32x32 or 16x16, the quality should not be particularly injured. Then save the image to PNG format.

Create a Favon with a Logaster online generator

Creating a Favicon online does not require any additional effort or special skills in design. Among Russian-speaking, I want to draw your attention to the logaster service.

First of all, you will need to create a logo. Already at this stage, you select the icon, the font and color gamut of the logo, which will also serve as the basis for the future Favicon. The process is simple and takes only a few minutes.

When the logo is ready, select the "Create Favorku with this logo" function:

Select the icon you enjoy. The editor is also visible as it will look in the reduced version. Preserved Favon can be downloaded in PNG and ICO formats of different sizes.

Draw a manual icon

If you do not own a graphic editor and do not want to contact designers on labor exchanges, then there is a second option - draw an icon with an online service. There are several options: Favicon.cc, Faviconer, DynamicDrive. You can also choose from ready-made options downloaded by other users.

This is how the process of creating the icons manually looks like in the service Favicon.cc:

Installing Favicon on WordPress

There are several options for connecting icons. The first is the easiest and most affordable one with the new version of WordPress - use the tools of our engine. If your theme settings have an option for installing Favicon - use it.

The third way is to make two lines to the file of your topic; Fourth - the use of plugins for this task. I recommend trying first the first option, because keeping additional plugins is not the best solution, especially for such a one-time operation as Favicon for the site.

Many poor-quality free topics rustly prescribe the path to the icon in the header.php file code. And if none of the proposed options is triggered, then you need to open the header.php file in the directory with your theme and delete all references to the text with the word "FAVICON". Helps - I tried! :-)

Method 1: Use WordPress features

According to the good, if you have the version of Wordpress 4.3 and the newer, then you will simply download a graphic file with a size of 512x512 pixels and through the "Appearance" interface - "Configure" to go to the Site Properties section. After that, download your file through the WordPress bootloader and it is automatically scaled under all the necessary dimensions.

Method 2: Using the settings of your topic

In many topics (premium or free), there are settings that are in the "Appearance" menu - "Topics Settings". First of all, I would recommend to view all the available settings options and find what belongs to Favicon.

So, for example, it looks like this option in my topic:

We reveal this block and see the following:

Now it will only be downloaded to the image and save the settings. Do not reprint the blind address of my icon from the image above - you will have your own image address and most likely it will look like this: http: //adressive- ascerta.ru/wp-content/uploads/2016/nature- file.png..

This is the fastest way to connect Favicon to your site!

Method 3: Connecting to the header.php file

Load the icon you created to your hosting, by connecting to FTP, SSH, or through the file manager of your hosting panel. The file must be placed in the root directory so that it is available at the address http: //adressum- ascerta.ru/favicon.ico.Or Favicon.png, depending on the type of icon.

Now go to the hosting to the directory with your theme (/ WP-Content / Themes / Your_tems /) and open the header.php file to edit. After the opening tag Insert the following code:

Either change the permission to PNG, if you have an icon of this type.

Method 4: Plug "Insert Headers and Footers"

We go to the "Plugins" section - "Add a new", in the search we drive Insert Headers and Footers, set the plagne found and activate it.

If you can not find, use the reference to the official WordPress Repository: Insert Headers and Footers. Save it on your computer and install the "Download" link, section "Plugins" - "Add New".

After that, go to the "Parameters" menu item - "Insert Headers and Footers" and in the Header area insert the HTML code that was shown in the point above, to connect FAVICON manually.

Do not forget to click the "Save Settings" button to save the settings.

Method 5: Plug "All in One Favicon"

If you have nothing happened to your previous option, then the very last option remains - to connect the plugin with the name All in One Favicon, it is installed in absolutely similar to all the other plugins, so I will not write in steps. The nuance is that this plugin has not been updated for more than three years.

After installing and activating the plugin, go to the "Parameters" menu section - "All in One Favicon" and see the following screen with the settings:

Frontend settings - this is to display the icon when viewing the site from the visitor; Backend Settings is an administrative part, you can not fill it. It remains to choose the corresponding icons and click "Save Changes".

Conclusion

If you have not worked for installing the icon with any of the ways to me, write in the comments, discuss how to solve your fine problem. But, as I personally seems to me, these options are more than enough to solve such a simple problem. ;-)

If you want to thank me for the material - you can do it here :-)

Or treat coffee ;-)

If you have found a mistake, please select the text fragment and click Ctrl + Enter..