👨🏻‍🔧 👨‍👨‍👦 🍑 How to install favicon on the site? 💬 🚵🏿 🙉

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

Other browsers (e.g. Mozilla) also have support for favicons. Depending on the program to search for, this icon may appear in various places, not only in the bookmark list (in fact, it may not even appear there). It appears in the address bar or the header of the browser tab.

Browser Tab Icons

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 hides . The 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 a mobile device, the icon will also be used. Therefore, you always need to 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 a tablet or smartphone.

How to create a favicon?

To create favicon.ico, you just need to save the 16x16 PNG file and convert it into a resource icon with png2ico. At your discretion, you can add different images to the same icon to provide alternative solutions. Most browsers use only 16x16 format for such an image, but in a different context (for example, when dragging a URL from the address bar to the desktop) a large icon can be displayed. 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 you install the favicon on the site, be sure to look at how the picture looks in different sizes.

Keep in mind that for a user with a slow internet connection, favicon can increase 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 to the 32x32 format should be enough so that the picture starts to 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 keep the number of colors up to 16 and create a 16-color icon using png2ico (or even a black and white icon). This will save a smaller file that loads faster.

When creating an image to add to favicon.ico, do not forget that the icons can be displayed in different background colors. For this reason, it is better to use transparency rather than a solid background. Think carefully about how to set the favicon most competently so that it harmonizes 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 approximately 30-40% of the background transparency.

You can use the logo of your brand, the symbol of the theme of the resource or your favorite image to make your individual site icon. The recommended size for the 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 image when you add it (so don't worry about how to set the favicon on SMF as a big picture).

Creating an icon using Photoshop

Experts recommend using a program for editing images, 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 image can be in PNG, JPEG or GIF format. After that, you need to determine how to install the favicon on the site.

Why 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 build credibility among the audience. Thus, the favicon defines the "identity" of your site. In addition, it also improves the 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 any browser will first search for downloads. If he does not find the icon, he will check the top-level directory of the server (www.example.com/favicon.ico for www.example.com on the server). For this reason, if you install it there, you can have a default icon for all pages in your domain. Depending on the browser and configuration, the favicon is not always displayed, even if it is in one of the above locations and the web page sees it.

In order to register the favicon in the page code, you can add the following 2 lines in the <Head> section:

How to add favicon to WordPress blog

If you are wondering how to install the favicon in " Direct ", there is also nothing complicated. The interface has corresponding menu items that allow you to select and upload a picture.

How to add favicon in WordPress

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

The site identifier section in the customizer allows you to change the resource name and description. Before leaving the menu, the question necessarily arises whether 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 File” button and upload the image you want to use as a favicon.

Adding a favicon to a 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 just save the changes. It is worth noting that the instruction on how to install the favicon on the Joomla website looks the same way.

After that, when viewing the site you will see your favicon in action. You can also access the site from a mobile device, and then select “Download full version” in the browser menu. You will notice that the icon will appear as on a full desktop computer.

How to install favicon on WordPress old version (4.2 or lower)

Upload your favicon to the root directory of the site using FTP. 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 site and everything will be done. If the blog does not have a header.php file or you cannot find it, then use a special plugin. Install and activate it in the site settings. After activating the plugin, go to “Settings”, find “Insert Header and Footer”, go to the “Insert Code” tab above in the header section, and save the settings.

If you don’t want to deal with the intricacies of working with FTP, but still are interested in how to install the favicon, you can also use a special plug-in that regulates the loading of the icon at all stages. Such additions to the engine are available not only for WordPress, but also for other popular systems, including Joomla.

How to install favicon on the site?