Get #Amazon #Prime for this #holiday #amazonprime #christmas #2019

How to call the icon on a browser tab? #favicon #web #html

By Jun - Support me on Amazon

Favicon

In case you are new to web content management or development, that icon next to your tab title is called a favicon. I guess it could have been derived from favorite icon.

You can see Twitter favicon in the image below.


If you don't have a favicon, on chrome, a default blank paper will be your website's favicon like so:


How to include a favicon


You need to include a link tag with rel set up 'icon' or 'shortcut icon' in your index.html file within head tags to display a favicon on your webpage. 
<head>
  <link rel="shortcut icon" href="PATH_TO_YOUR_FAVICON/favicon.ico">
</head>

On HTML standard document, there is not a shortcut rel. That means shortcut is not a standard rel and thus it is not necessary to include in the future. The reason is, at the moment, to support IE 8 and older, rel="shortcut icon" is needed according to this blog by a Googler that works on v8. Thus, when your webpage doesn't need to support IE 8 and older, you can just use.

<head>
  <link rel="icon" href="
PATH_TO_YOUR_FAVICON/favicon.ico"></head>

In fact, you don't even need to include this link rel tag at all if you name your favicon as favicon.ico. This is because browsers will look for a favicon.ico file in the root directory of your website.
According to the same blog linked above, without this link rel tag, browser will defer loading of the favicon until finishes loading other assets.

How to create a favicon

There are quite a few online favicon generators that you can generate your favicon if you aren't confident with your design skill. If you only need text on your favicon, I think you can just go to a favicon generator site and create one.
However, most of these online tools have their limitations and thus I don't recommend a specific one. You should give them a try if you don't require a fancy favicon.

Thanks for reading!