Adding Icons (Favicons & RSS feed icons) to the address bar for your Web Application

There are two types of icons that can be added to your web site namely Favorite Icons and RSS Icons.



Adding Favicons (favorite icons) to Web Sites or Web Pages:

Favicons are important as they provide visual indicators to visitors and help them to easily associate the content with a bookmark in their browser. Favicons are graphically associated with a particular Web Site or Web Page. Any graphical browsers display them as a visual reminder of the Web site identity in the address bar or in tabs.

To add favicon to Web site, you need the following

* An image which needs to be displayed as favorite icon
* An approach specifying that the above image is to be used as favicon.

Image format:

The format of the image must be one of PNG, GIF, or ICO and the image must be of 16x16 pixels or 32x32 pixels.

Approach to add Favicons:

There are two ways of adding Favicons to Web site or Web Page.

* By using link tag where it uses HTML to indicate the location of an icon for a given page. Add the link element to the head section of the document.

Example: <link rel="icon" type="image/png" href="/path/image.png"/>

* By placing a file called favicon.ico in the root directory of the web server.

Example: In Apache Tomcat Web server, you can see the file named favicon.ico under the tomcat_installation/webapps/ROOT folder. Just similar to this, you can have your image for your web applications root directory.

Adding Feedicons (RSS Icons) to Blogs based Web Sites:

RSS Icons provide a means to appear in the address bar of your browser for Blogs based Web Sites providing access to users for feeds. This allows any users to directly use these icons to subscribe to that feed link through the browser.

Approach to add RSS Icons to your Blog Site:

* By using link tag where it uses HTML to indicate the location of an icon for a given page. Add the link element to the head section of the document.

Example: <link rel="alternate" type="application/rss+xml" title="Feed Title" href="Feed Location"/>

For both the cases, Link element has the different attributes like rel element containing what this link is providing. The type element which should be self explanatory. Next is the title, which performs the same function as title elsewhere on the web; displaying a friendly name instead of the resource's location. Finally, href is the location of the link's target on the internet, its URL. We then close the tag.