Post
Ask Question

Implementing Favicon in Web Applications

Overview

This article explains how to implement a Favorite icon in a web application.

Favorite Icons

A Favicon (short form of Favorite icon) is an icon associated with a webpage. These are also commonly known as a shortcut icon, web site icon, tab icon and so on. Favicons are displayed in some browser's address bar (like IE), and in most of the browsers it is shown next to the page's title. A few examples of some very common websites are displayed below.

Google:              

                                                                                                    

MSDN:

MSDN

Facebook:                                                                                                          

Facebook                                                                                             

C# Corner:
 
CsharpCornerImage1   

Implementing Favicon

A Favicon is commonly of the size 16 x 16 pixels. We can create or rather convert any image into Favicon format or else we can directly download it from many websites available for free. The image can contain text like "g" for Google, "f" for Facebook and so on or just an image as used in our very own C# Corner. A Favicon used for any web application should be named “favicon.ico”. The ICO file format is an image file format to display computer icons.

Here is an example of a Favicon that I created on http://faviconist.com/. Once we create a Favicon by specifying the text we want to display and other color combinations, styles and so on and click on “Save Favicon” button, this website generates a link tag that we can directly add to our web app.

Once we have the Favicon ready, we need to wrap it with a "link" tag (as we do for images) and specify rel as “shortcut icon”.

  1. <link rel="shortcut icon" href="http://faviconist.com/icons/d4030b0a9eb3cda58232fa83b92c405c/favicon.ico" />  
Alternatively, we can create or download the .ico file and put the same in the root directory of our web application and use the following (this approach is obviously preferred):
  1. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />  
Here is the complete HTML page:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.   <title>Favicon Demo</title>  
  5.   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />  
  6.   </head>  
  7.   <body>  
  8.      <h1>Hello World!</h1>  
  9.   </body>  
  10. </html>  
Similarly, we can add the same in an ASP.NET web app or ASP.NET MVC Web application project. In these applications we can put the link tag in the Master page or layout page of a MVC application. For testing purposes (if you try), please ensure that the application is hosted in IIS and not using the local Visual Studio development server otherwise it may not work as expected.

About Favicon

The Favicon is standardized by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, released in December 1999 and later in the XHTML 1.0 recommendation, released in January 2000.

The current HTML5 specification recommends specifying size icons in multiple sizes using the attributes rel=”icon” within a <link> tag. Multiple icon formats, including container formats such as Microsoft “.ico” and Macintosh “.icns” files may be provided by including the icon's content type in the form of type="file content-type" within the <link> tag.


Similar Articles