Thursday, July 21, 2011

Favicon - Intersting thing for website developers

Have you ever noticed when you go to some websites there is a cool image in the address line, rather than the blue 'e'? Or when you add some sites to favourites, an image shows up next to the name? These images are a favicon (favourites icon) and hey're used when you bookmark a page. To have your own image show up in someone's favourites list when they bookmark YOUR page, you need to upload your own favicon.ico. You (usually!!) don't need to add any code to your pages for this to work, browsers above IE5 will automatically look for an icon called favicon.ico when it adds a site to favourites. However, I've found some browsers won't automatically check, so have found it best to place some code into each page stating where the favicon is, so they WILL use it. You can use different icons for each page, but you need to state in your pages that it's a different image to the 'normal' favicon.ico.




  

Inserting Favicon in Various Techanologies

1.)  Favicon in HTML

First, change the name of the favicon to "favicon.ico".
Insert the following HTML tag inside the <head> ... </head> section of your web page:
<link rel="shortcut icon" href="favicon.ico">

If you have downloaded an animated favicon, insert this:

<link rel="shortcut icon" href="favicon.ico">

2.)  Favicon in ASP.NET

favicon in master pages

Place this code in the Head Section of the markup within your master page.
   
    <link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

favicon in webpages

    <link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

OR

   <link rel="shortcut icon" type="image/ico" href="http://www.domain.com/favicon.ico">

3.) Favicon in PHP

echo "<link rel=\"icon\" href=\"images/favicon.ico\" type=\"image/x-icon\">";
echo "<link rel=\"shortcut icon\" href=\"images/favicon.ico\" type=\"image/x-icon\">"; 

And Last Thing How Creating Your Own Favicon

Visit  www.favicon.cc
and here u can create your website favicon... and download after creation

No comments: