HTML: adding a website address bar icon or favicon

Contributor Icon Contributed by William_Wilson  
Tag Icon Tagged: Web application programming  

Place an icon beside your address line, and make your website more professional.


It is a very simple process.
*You probably noticed the little chef’s hat on this website, this is not exactly how www.tech-recipes.com did there’s as this site includes xml for hiding such features, but this will get you started with the same results.

Create Your Icon:
First you are going to need an image:
-using your favorite photo editing program resize it to 16×16 and save it as a .bmp file.

-next open it with paint or some other basic editing software that will not try to add anything to the file as photoshop and some other high end programs do, in the transfer from .jpg and .gif to .bmp and resave it, replaceing the old .bmp file.

-now that you have a proper likely 24-bit .bmp save the file -again with paint- only save it as the following:
favicon.ico
*This name is important as it identifies it as a favorite and makes the icon appear.
*Also some browsers will automatically look for this icon to display.

-If at all possible place this icon in the root of your website (eg. the same folder as your index.html file.

Apply the Icon to Your Page:
-Between the and tags, place the following code:
<link rel="shortcut icon" href="?\favicon.ico">

*Where the ? is the address or location of your icon

In the case of your index.html file being in the same folder as your icon, the code should look similar to this:
CODE Example:
<html>
<head>
<link rel="shortcut icon" href=".\favicon.ico">
</head>
<body>
</body>
</html>

*The “.” is a reference indicating to start the path from the current folder (eg. the folder in which the .html file is located)

*A different icon can be applied to every page, or the same icon to every page.

*NOTE in IE I have noticed that it can take a few days or even weeks before the icons start to show up, if they ever do (I’m not anti-MS, but i’m not a diehard fan either), and the same glitch occurs in some versions of Mozilla as well, but Firefox users will be able to see the icons immediately.

Questions/Comments: william_a_wilson@hotmail.com
-William. § (marvin_gohan)

 

22 Comments -


  1. michelle said on October 6, 2008

    this worked for me…not in my safari though, just the firefox…hopefully will show up in safari eventually.
    thanks

  2. Jonathan Woodward said on November 6, 2008

    Thanks for the article! This is exactly what I was looking for.

  3. Thomas said on January 6, 2009

    Hey, it didn’t work for me in Internet Explorer. I will view my website on my friends computer, he has firefox. Hopefully it will show up evently in Internet Explorer.

  4. vc said on January 14, 2009

    Yea, well its work in firefox for me, but it doesn’t work in IE …

  5. Dane G said on March 7, 2009

    Works well in fire fox but not IE

  6. Ricky said on June 10, 2009

    Thanks
    Thats great I m looking for this
    Nice
    again Thanks

  7. Priyanku said on October 2, 2009

    quick tip

    For IE to show the icon add the site to your favourites(in IE) and it will quickly adjust its cache to show the icon just like firefox.

  8. Anonymous said on October 22, 2009

    Thank you SO very much. Magnificent bit of work. Concise, fully-explanatory. You make the complicated so simple. Many thanks for your generosity.

  9. Anonymous said on November 8, 2009

    Good results, worked like a charm.
    Thank You for your work and carefully thought out instructions.
    The icon showed instantly through Google Chrome, and not with Mozilla Firefox.
    Paul in Oz

  10. Anonymous said on November 18, 2009

    Cool……Good stuff…thank you

    Wish there was a one stop source for all this web mastering stuff

  11. contractor web design said on December 5, 2009

    icons works only on firefox/mozilla. IE just can’t have it… :D

  12. Anonymous said on February 17, 2010

    http://www.course.lk is the best site to find the detaile about sri lanka courses

  13. kshama said on May 29, 2010

    thanks

  14. Sbell said on June 16, 2010

    Worked for me in Firefox, Crome & Safiri but not in IE8.

  15. Jaimin_ce43 said on July 7, 2010

    hii
    actually this works for mozila and crome but doen’t work for IE…
    so what i have to do??
    please give me some idea…

  16. David said on November 12, 2010

    even when i favorited my website the icon didnt show up
    oh, and i cant see the chef hat

  17. Aaa said on December 14, 2010

    truely good

  18. kanchan bansal said on January 9, 2011

    Thanks.. It works great……

  19. Rikker665 said on February 7, 2011

    does it work for a host to like http://www.webs.com

  20. Msankar600 said on June 20, 2011

    i tried…but its not working…. please provide right information

  21. Kishore Kick said on July 25, 2011

    in above “image location” means, it would be like “icons/ic2.png”  nothing but the address of the image. and type specifies the whether the format of the image(like png,ico,jpg etc)

  22. Spider Crazy said on September 13, 2011

    Hey thanks mate for the 411, dont work in IE and tried FF [test only as I cant stand FF] ONLY showed it after accepting the blocked content. As my website is covered a broad spectrum of browsers and I want to keep a professional look I think its better keeping the default logo, during the editing of my website I will keep it and if once I have finished ina few weeks its still not done I will remove it. the blue e looks better than the missing icon logo.

    SC

 

RSS feed for comments on this post. TrackBack URL

Leave a comment -