Probably, many users noticed that when you open a site in the left corner of the tab displays a small icon that is typical for each portal. However, few people know what it is and how to change it on their website.
The history of the first favicons
A small icon on the site is called a favicon, which means "icon for favorites" translated from English. Initially, it was used to quickly find and restore bookmarks in IE browsers. Then it became universally displayed by almost all Internet walkers to give the site a special style.
Favicon Features
A favicon is an ordinary image, usually 16 by 16 pixels. For storage, ICO, PNG and GIF formats can be used. Favicon is supported by many popular browsers. These include Chrome, IE, Opera, Firefox. Some may support animated versions, some may not.
By default, the browser tries to find the icon in the root of the site. However, you can tell him exactly where she is. To do this, it is enough to use the line in the code:
<link rel = "style type" type = "image / extension type" href = "/ path to the new favicon" />.
Create your favicon
To create your own icon, just use one of the online editors on the network. For example, the most famous is located at favicon.ru. It is necessary to mark with a pencil the points that need to be filled, and then save the picture.
How to change favicon
Many web developers try to change the standard CMS icon or none at all on a more suitable topic when creating a site. Next will be a list of methods that describe how to change the favicon in various content management systems or without them.
Joomla 1.5 and work with favicon
Joomla 1.5 is one of the first stable versions of a content management system. It is used less and less, but many still support it on some sites. In order to change the favicon in Joomla 1.5, you need to create an icon from the finished picture or from scratch. Then go to the folder with the Joomla templates, which are in the templates directory, and copy the favicon there.
Joomla 3
The latest version of this content management system. Improved functionality and added new features.
Before changing the favicon in Joomla 3, you must first create it. How to do this has been described above. You can then use one of two methods. The first is borrowed from Joomla 1.5 and involves manually replacing the file in the template folder.
To implement the second method, you need to edit the index.php file, which is located in the root folder of the current template. It is interested in the <head> tag. In order for everything to work as it should, you need to enter from the opening tag to the closing tag:
<link rel = "cascading style" type = "image / type of content used" href = "/ favicon location" />.
You can get to the index.php file simply by going through the folders to the desired one or through the admin panel. In the control panel, go to "Extensions" and there go to the "Template Manager". Among the present options, you need to select the current one and click "Change the template of the main page." A code editor will open in which the above code must be inserted between the opening and closing head tags.
Sometimes the favicon is not immediately displayed in the search results. This may be due to the fact that the page has not yet been indexed. It’s worth a little wait, and in a few days, or maybe a month, a new favicon will appear at the top of the site.
How to change favicon in Bitrix
Bitrix is a content management system on the basis of which you can create simple sites and corporate portals. Developed by 1C-Bitrix.
The file structure of the site is somewhat similar to Joomla, and the process of replacing a favicon with the desired one happens in exactly the same way. That is, you need to go to the folder with the template and copy the desired image in ICO format there. If that doesn’t help, try adding it to the root folder of the project as well.
There is also another method that can be combined with the two listed above. This is written in the main file already known lines:
<link rel = "style and its type" type = "image / image type" href = "/ path" />.
Wordpress
WordPress is one of the most famous content management systems. It gained its popularity due to the fact that it is free, easy to learn and functional. How to change favicon on WordPress site? This process in this CMS is simpler than everyone else. You need to go to the control panel and go to the Cherry Options section, and then select the Logo & Favicon tab. The existing file must be deleted using the Remove button. Then prepare a new icon and download it to your computer. Now, using the media library, you need to add the updated icon to the database and save the changes.
After all the manipulations, just reload the page and see how the favicon has changed. It is possible that it will not appear the first time, so you need to update your browser cache and try again.
There is another way to change the favicon in WordPress. To do this, there is a special header.php file that is responsible for displaying the site header. It has a block with head tags. It is precisely between them that you need to insert the following code:
<link rel = "icon name" type = "image / extension type" href = "/ image path" />
Header.php is located under / wp-content / themes / theme name. It is worth paying attention to the fact that the ICO extension is used in the lines of code. However, if it is of a different type for the current favicon, then you can specify in the code the one you need.
Conclusion
The article described in detail how to change the favicon in different content management systems. Why do you need to do this and what practical interest is this procedure? The main reason is the recognition of the site. It is from the favicon that you can find your favorite site in search results. In addition, with a large number of open tabs in a modern browser, you can quickly calculate which of them has this or that page.
Before you change the favicon, you need to prepare it. This can be done by converting the finished picture or logo. Or manually draw a new favicon from scratch. There are many online editors, as well as online converters.