How to Add Favicon to Your Website

how to add favicon to your website

A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Many recent user agents (such as graphical browsers and newsreaders) display them as a visual reminder of the Web site identity in the address bar or in tabs. The wikipedia includes an article about favicons.

It is (also called ‘favorites icon’ or ‘site icon’), is a small image displayed next to the website URL in the browser address bar, and inside the Favorites (Bookmarks) menu. While it does not have any specific function, it helps to further establish your website branding.

To add a favicon to your Web site, you’ll need both an image and a method for specifying that the image is to be used as a favicon. This tutorial explains the method preferred by W3C for specifying the favicon.

This document does not discuss in detail how to create a favicon image. However, the format for the image you have chosen must be 16×16 pixels or 32×32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.

1. Upload your icon in root directory or your desicrd location.

2. Add this line in <heade> secion of your document.

For .png Icon

<link rel="icon" type="image/png" href="http://example.com/favicon.png">

For .ico Icon

<link rel="icon" type="image/ico" href="http://example.com/favicon.ico">

Replace “example.com” with your own domain and add specifc path where your icon is uploaded.