Why doesn't this code get the icon image on the title bar of webpage

Question

I created the following css file :

@charset "utf-8";
/* CSS Document */

link {
icon:url(logo_2.png);
}

Then in my html file i imported this css file as:

<style="text/css">
   @import url("ico_css.css")
</style>

I am trying to put up a icon on the webpage. What am i missing ?

Answer 1

You don't use CSS to add favicons — I don't know where you got that idea.

You do it using:

• An HTML <link> element, like this:

  <link rel="shortcut icon" href="logo_2.png">
  

  This does not involve CSS at all. The <link> element does not reference a stylesheet, it references the icon file itself.

  Some browsers don't support PNGs as favicons, so you may have to convert that PNG to an ICO using some online or offline tool to get it to work across browsers.

• If there are too many static pages for you to update, you must convert the PNG into an ICO, place the icon file on the document root of your site and call it favicon.ico instead. You won't have to add any <link> tags; browsers should discover the icon automatically.

Answer 2

Use this free online tool to automatically convert any image (it retains transparent backgrounds too) and it will output a properly sized favicon.ico file and its link code.

http://tools.dynamicdrive.com/favicon/