If I am accessing a website, both desktop and mobile, there is the option to add the link to the home screen, and some websites add the link with a custom icon.
Ex: Stack
Nowmysiteforexamplehasnoiconsetandcomesabrowserdefault.
How do I configure this on my site?
You need to add favicon to your page
What is favicon? (Wikipedia)
Favicons are small images (usually 16 by 16 pixels) that stored on the site for viewing by the browser. Usually logos are used as logos in small companies, entities and any brands. An example is the "W" that appears in the browser when accessing Wikipedia.
There are several free favicon generators on the internet that you can use in a very simple way.
Here is an example that I myself use
Once accessed, just select the image you want to be the favicon of your site and select the option:
Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
Wait for favicon creation processing.
Then click on the link: Download the generated favicon Once this is done, a .rar file will be downloaded with various favicons that fit the devices.
Next, extract these favicon's to your project folder and copy the call instructions created by the generator.
The instructions should be similar to this:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Note that when you save the site to your desktop, the icon you choose will be there.
Also note that the icon is present on the side of the page title in the browser tab.
Remember that you should correct the call paths, otherwise it will not work.
As the @Balvo response suggests, you need to insert a specific tag inside the <head> tag. every page of the site to reference its icon. Best of preference for a more generic pro file name so you can change the resolution and file type when you want.
Example:
<head>
<!--Sugiro ou colocar o ícone na raiz do site ou usar uma variável javascript para guardar a string do endereço raiz-->
<script>
function Endereco(){
var caminho = "/raiz_do_projeto/";
document.write(caminho + "/favicon.png");
}
</script>
<link rel="icon" type="image/png" href="Endereco();">
</head>