How to install the Favicon on the site?

Favicon is an abbreviation for the "selected icon" (translated from English). The name comes from the list of bookmarks in Internet Explorer, which is called "Favorites" / "Favorites List". When you add a site to the Explorer tab (version 5 and higher), the server asks if the resource has the file favicon.ico. If such a file exists, it will be used to provide an icon that appears next to the bookmark with the text.

Other browsers (for example, Mozilla) also have support for favicon. Depending on the program for searching, this icon can be displayed in different places, not only in the list of bookmarks (in fact, it may not even appear there). It is displayed in the address bar or title bar of the browser tab.

Icons on browser tabs

Most users, as a rule, have many open tabs in the browser window. With the increase in the number of tabs, the name of the sites is hidden. Favicon helps the user identify the link and quickly switch to the tab that needs to be opened.

In addition, if the user wants to add his favorite site to the desktop on the mobile device, the icon will also be used. Therefore, you should always decide on the choice of the picture before installing the Favicon. Such a site icon is displayed as an application icon on the desktop of the tablet or smartphone.

How to create a Favicon?

To create favicon.ico, you just need to save the 16x16 PNG file and convert it to the resource icon from png2ico. At your discretion, you can add different images to the same icon to provide alternative solutions. Most browsers use only the 16x16 format for this image, but in a different context (for example, when dragging a URL from an address bar to the desktop), a large icon can be displayed in the picture. If the resource icon contains only 16x16 images, it will be scaled to the desired size, so technically there is absolutely no need to add alternative solutions. However, this can improve image quality. Before installing the Favicon on the site, be sure to review how the picture looks in different sizes.

Keep in mind that for a user with a slow Internet connection, the Favicon can increase the page load time by a few seconds. This is possible if the image file is too large, so do not overdo it. Adding an alternative format 32x32 should be enough to make the picture look good even in situations with large icons. Using more options is a bonus, performed only at the request of the site developer. Try to maintain the number of colors to 16 and create a 16-color icon with png2ico (or even a black and white icon). This will save a smaller file that loads faster.

When creating an image to be added to favicon.ico, do not forget that icons can be displayed in a different background color. For this reason, it is better to use transparency, rather than a solid background. Well think about how to install the favicon most competently, so that it is in harmony with any background. It is worth noting that you can set intermediate values, which are measured in percent. Experts say that the ideal setting is about 30-40% transparency of the background.

You can use your brand's logo, resource theme symbol or favorite image to make your individual site icon. The recommended size for a favicon is at least 512 pixels wide and high. The image should be square, but you can use large rectangular pictures. Many engines will allow you to crop the picture when you add it (so do not worry about how to install the favicon on SMF as a large image).

Creating an icon using Photoshop

Experts recommend using an image editing program, for example, Adobe Photoshop or GIMP. This will create a site icon exactly 512 × 512 pixels. Thus, you can save the exact proportions of the picture, use transparent images or fill the background of your choice. This picture can be in PNG, JPEG or GIF formats . After that, you need to determine how to install the favicon on the site.

Why do I need to add to the site?

As already noted, the favicon icon is a small icon that appears next to the site name in the browser. It helps users identify the link, and more frequent visitors to your site will instantly identify this small image. This increases brand awareness and helps gain trust among the audience. Thus, the favicon determines the "identity" of your site. In addition, it also improves usability and user experience of the site.

How to install favicon on html site

To add your new favicon to a web page, you must install it on the server in the same folder where the web page is located (for example, www.example.com/foo/favicon.ico for www.example.com/foo/index. Html). This is the data that first of all any browser will look for to download. If it does not find the icon, it will check the top-level server directory (www.example.com/favicon.ico for www.example.com on the server). For this reason, if you install it there, you can have the default icon for all pages of your domain. Depending on the browser and configuration, the favicon is not always displayed, even if it is in one of the above places and the web page sees it.

In order to register the presence of a favicon in the page code, you can add the following 2 lines in the section:

How to add a Favicon to a WordPress blog

If you are wondering how to install the Favicon in Direct, there is nothing too complicated. The interface has corresponding menu items that allow you to select and upload an image.

How to add a favicon to WordPress

Starting with WordPress 4.3, you can add favicon to the site from the administrator area. Just go to "View" / "Settings" and select the "Site" tab.

The section of the site identifier in the customizer allows you to change the resource name and description. Before you exit the menu, you will be asked if you really want to display the new data in the header. It also allows you to upload your icon for the site. Just click on the "Choose a file" button and upload the image you want to use as a Favicon.

Adding a Favicon to your blog

Further instructions on how to install the Favicon are as follows. If the image you upload exceeds the recommended size, then WordPress will allow you to crop it. If it meets the recommended parameters, you can simply save the changes. It is worth noting that the instruction on how to install a favicon on the Joomla site looks similar.

After that, when you browse the site, you will see your favicon in action. You can also go to the site from your mobile device, and then select "Download full version" from the browser menu. You will notice that the icon will be displayed as on the full desktop of the computer.

How to install the Favicon on WordPress of the old version (4.2 or lower)

Download your Favicon to the root directory of the site using the FTP protocol. After that, you can simply paste this code into the header.php file of the desired theme.

Replace wpbeginner.com with the URL of your website, and everything will be done. If the blog does not have a header.php file or you can not find it, then use a special plugin. Install and activate it in the site settings. After activating the plug-in, go to "Settings", find the "Insert Headers" item, go to the "Insert Code" tab above in the header section and save the settings.

If you do not want to understand the intricacies of working with FTP, but at the same time are interested in how to install the Favicon, you can also use a special plugin that regulates the icon loading at all stages. Such additions to the engine are available not only for WordPress, but for other popular systems, including for Joomla.