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 WordPress Favicon
This Favicon is very familiar, which can be seen next to the Title of any WordPress 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
|
1 2 |
<span class="code-keyword" style="color: blue;"><</span><span class="code-leadattribute" style="color: maroon;">link</span> <span class="code-attribute" style="color: red;">rel</span><span class="code-keyword" style="color: blue;">="</span><span class="code-keyword" style="color: blue;">shortcut icon"</span> <span class="code-attribute" style="color: red;">href</span><span class="code-keyword" style="color: blue;">="</span><span class="code-keyword" style="color: blue;">https://www.codeproject.com/NAME of your FAVICON.ico"</span> <span class="code-attribute" style="color: red;">type</span><span class="code-keyword" style="color: blue;">="</span><span class="code-keyword" style="color: blue;">image/x-icon"</span><span class="code-keyword" style="color: blue;">></span> |
Put the above code in the <head>.......</head> section of your webpages if Empty Template is used, else in theLayout 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. 
This is trivial and my very first Tip and Post too, wanted to start with this.
Happy Coding
Facebook
Twitter
LinkedIn
GooglePlus