Adding a Favicon to your Website

4.75 avg. rating (95% score) - 4 votes

Introduction

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?

wpThe 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

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. Smile | :)

This is trivial and my very first Tip and Post too, wanted to start with this.

Happy Coding