Nowadays, when one visits a website, they would see an icon next to the url or perhaps the web page title on a tab. This icon is at times referred to a favicon. In this tutorial, you will learn how to add a favicon to your site.

Setup

If you have not already done so, open Visual Studio and create a new web project. If you rather use your own developing environment or text editor such as notepad, you may set those up at this time.

Step one.

First step we will take is creating the HTML document. We provide you with the necessary tags in the code box below:

Step two.

A favicon is a particularly small graphic image, or icon that is associated with a site or company (not always). Essentially, when one looks at the tabs or URLs of a site, it is a form of identity. By small, we mean either 32 by 32 pixels or 16 by 16 pixels. This image must use 8-bit or 24-bit colors. According to the W3C, the icon is to be a PNG graphic, however people use GIF or ICO extensions to their images at times.

For this example, locate any image that can be transformed into the image definition above. Once it is saved under favicon or favicon_name.extensionType, where extension type is any of the three image file extensions provided to you above, simply place the relative path to the image with the “href” attribute in the link tag below:

Save and run your code. Automatically, you should see the image (so long as it follows the guidelines) in the tab where your page is opened as well as the URL, regardless if it is running on a local host. Our favicon is a star next to the words, “Home Page”, as follows:

A Few Last Words…

Download Source Files