When you open multiple tabs in your browser, you notice that each tab is identified by its favicon. Favicon = Favorites icon. Here is the icon for walmart.com.
Most of us recognize these favicons because they are, well, iconic.
These favicons are a must for usability because they help the user keep track of your webpage as they open multiple tabs in their browser and, of course, they add a real flair to your site. Little details mean a lot for branding. Avoid the dull default file icon, and ensure your site has its own favicon.Read More.
How to make a favicon
In wordpress, the easiest way is to take or create a small image, then open Appearance > Customize > Site Identity, Scroll down to "Site Icon", and upload your square image. Wordpress will do the rest.
For other sites, if you can edit your HTML, you can place the following in your head section.
This requires a file of the image/-x-icon type. You can create this file by taking your square file that you already found and going to https://www.favicongenerator.com/, uploading your image, and then downloading the created icon file.
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
Designing your favicon
Your favicon is much smaller than your logo and so you have to have a very simple design. One common way is just to use the first letter of the logo. For example google.com uses just the letter "G" and Amazon.com uses a lower case "a" with a stylized arrow underneath.
Some sites have gone very minimalist and their favicons are just miniature logos. For example, consider target.com with its famous red bullseye. On the other hand, ebay.com does not use any part of its logo, but uses a tiny shopping bag as its favicon.
The main point is to use something that is clean, noticeable, and makes it easy for your users to identify your site from an open list of tabs. If you feel artistic, you can find many online free tools to create icons.