Click here to Skip to main content
Click here to Skip to main content
Go to top

Add a Favicon

, 5 Mar 2014
Rate this:
Please Sign up or sign in to vote.
Favicon is a little icon but plays a subtle and important role. It acts as a brand.

Introduction

A Favicon ("favorites icon"), is an icon associated with a particular website or webpage that is displayed in the browser address bar next to a site's URL. Favicon is a little icon, but plays a subtle and important role. It acts as a brand.

What Is It Exactly?

The BOB Favicon

This Favicon is very familiar, which can be seen next to the Title of any CodeProject WebPage and some other places as described below.

Where this Favicon is Displayed?

It is displayed at three places.

  • The URL in the address bar
  • The websites name in the list of bookmarks
  • In the browsers that support a new feature Tabbed Browsing (Tabbed browsing is a function of some Web Browsers that allow uses to surf and view multiple pages by loading the Websites into "tabbed" sections of one page, rather than multiple pages. This allows the user to view a selection of favorite sites in one window, view multiple search results at the same time, and would allow you to set several pages as your home page, rather than just one)

Using the Code

It is very simple and easy. Follow the steps described below.

Step 1: Go to some online Favicon Generator Website

I recommend Favicon Generator.

Step 2: Browse/Create Favicon for your Website

That would become your Website's brand image.

Step 3: Generate the Favicon and Download

Add it in your root directory and remember to rename it as sometimes it does not refresh itself if Internet Template is used.

Step 4: Add the Following Code inside head Section of Web Page

<link rel="shortcut icon" 
href="http://www.codeproject.com/NAME of your FAVICON.ico" type="image/x-icon">

Put the above code in the <head>.......</head> section of your webpages if Empty Template is used, else in the Layout Page for Internet template.

Points of Interest

While working on a demo, I saw a Favicon in my root directory and got curious to know what is the use. I saw this when I used an Internet Template in ASP.NET MVC4 not an Empty Template. Hope beginners like me get to know about this and use this with their Websites.

Give your Website a brand with these steps and enjoy. Smile | :)

History

  • 05 March 2014 - First version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Suraj Sahoo Mindfiresolutions
Software Developer (Junior) Mindfire Solutions
India India

I am currently a Software Developer at Mindfire Solutions,India.Working currently on ASP.NET MVC4 Web Applications.



I am passionate and enthusiastic to learn more about softwares and coding.Code Project is the best platform to feed me what i want.



I would love to know queries and questions from all of you specially beginners like me so that we could share some Code stuffs and make new recipes.Drop into suraj.0241@gmail.com.

I am Microsoft MVC4(70-486) certified.

Follow on   Twitter   Google+

Comments and Discussions

 
QuestionShort and Sweet PinprofessionalRahul VB23-Apr-14 9:05 
AnswerRe: Short and Sweet PingroupSuraj Sahoo Mindfiresolutions23-Apr-14 18:50 
QuestionTerminology PinpremiumB. Clay Shannon11-Mar-14 8:35 
AnswerRe: Terminology PingroupSuraj Sahoo Mindfiresolutions11-Mar-14 19:05 
GeneralMy vote of 3 PinmemberKommuSoft5-Mar-14 3:13 
GeneralRe: My vote of 3 PingroupSuraj Sahoo Mindfiresolutions5-Mar-14 5:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140905.1 | Last Updated 5 Mar 2014
Article Copyright 2014 by Suraj Sahoo Mindfiresolutions
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid