How to add a browser tab icon (favicon) for a website

A favicon (favourite icon) is an image, associated with a Web page/site and is displayed in the address bar, next to the title on the tab in a web browser or in other places where the web page may be referenced (history, favourites etc).

Originally, a file containing the icon was named “favicon.ico” using a format, “ico“, created by Microsoft for its Windows O/S. This format allows one or more images in different sizes (16×16, 32×32, etc) and colour depths to be stored in a single file so that the relevant sized image can be selected depending on its intended use/location. The image used for the icon must be square

The favicon file(s) are usually located at the root of the site directory on the server and can be found automatically by the
web browser.

Today, you can use a variety of different image formats for the favicon and the file can be placed in alternative locations, referenced from the web page by adding something similar to the following within the <head> section of the html page.


<link rel="icon" type="image/png" href="./assets/favicon.png"/>

I did find a useful tool for creating favicons and images from Font Awesome icons and the generated favicon can be previewed live in the browser.

https://gauger.io/fonticon/

with source on Github at

https://github.com/devgg/FontIcon