HTML: adding a website address bar icon or favicon

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)

The Conversation

Follow the reactions below and share your own thoughts.

35 Responses to “HTML: adding a website address bar icon or favicon”

  1. October 06, 2008 at 11:14 pm, michelle said:

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

    Reply

  2. November 06, 2008 at 12:19 am, Jonathan Woodward said:

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

    Reply

  3. January 06, 2009 at 11:56 pm, Thomas said:

    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.

    Reply

    • November 20, 2013 at 4:25 pm, Tobias said:

      It worked in: Chrome, Firefox and Opera but not in I.E. nieder did the one in this page. Thanks for posting

      Reply

  4. January 14, 2009 at 5:12 am, vc said:

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

    Reply

  5. March 07, 2009 at 12:26 pm, Dane G said:

    Works well in fire fox but not IE

    Reply

  6. June 10, 2009 at 8:54 am, Ricky said:

    Thanks
    Thats great I m looking for this
    Nice
    again Thanks

    Reply

  7. October 02, 2009 at 7:47 pm, Priyanku said:

    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.

    Reply

  8. October 22, 2009 at 3:20 pm, Anonymous said:

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

    Reply

  9. November 08, 2009 at 6:11 am, Anonymous said:

    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

    Reply

  10. November 18, 2009 at 9:29 pm, Anonymous said:

    Cool……Good stuff…thank you

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

    Reply

  11. December 05, 2009 at 6:57 am, contractor web design said:

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

    Reply

  12. February 17, 2010 at 6:15 pm, Anonymous said:

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

    Reply

  13. May 29, 2010 at 8:37 am, kshama said:

    thanks

    Reply

  14. June 16, 2010 at 5:57 pm, Sbell said:

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

    Reply

  15. July 07, 2010 at 8:29 am, Jaimin_ce43 said:

    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…

    Reply

  16. November 12, 2010 at 3:12 pm, David said:

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

    Reply

  17. December 14, 2010 at 6:26 am, Aaa said:

    truely good

    Reply

  18. January 09, 2011 at 1:16 pm, kanchan bansal said:

    Thanks.. It works great……

    Reply

  19. February 07, 2011 at 11:46 am, Rikker665 said:

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

    Reply

  20. June 20, 2011 at 10:41 am, Msankar600 said:

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

    Reply

  21. July 25, 2011 at 6:18 am, Kishore Kick said:

    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)

    Reply

  22. September 13, 2011 at 5:57 pm, Spider Crazy said:

    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

    Reply

  23. February 15, 2012 at 7:14 am, gervasio constatino said:

    hi!! thanks

    but doesn’t work on IE, and i cann’t see the little chef’s hat on this website too with IE, only with firefox, and with firefox work ok with you exemple.. thanks anyway

    Reply

  24. May 19, 2012 at 8:28 am, ramesh said:

    thanks i was looking for it and now i m going to upload my icon

    Reply

  25. May 23, 2012 at 8:31 pm, dentist said:

    I can’t get it to work – do I save as .bmp or jpeg?

    Reply

  26. August 22, 2012 at 4:12 pm, tamil said:

    tamil is creat web

    Reply

  27. September 20, 2012 at 5:40 pm, Steve said:

    Regardless of web browser the delay with showing your updated sites is the caching.

    In fact the more sophisticated browsers will have this like Chrome & IE. Go into settings & delete all history.

    Reply

  28. October 28, 2012 at 6:15 am, arunseh said:

    how could i make my commenting system like your website in my web site

    Reply

  29. December 26, 2012 at 7:55 pm, يلا نتعلم said:

    tamil is creat web

    Reply

  30. April 27, 2013 at 3:00 pm, nataly said:

    I did exactly as told, and it does not show up… I am using chrome.
    Any ideas?

    Thanks.

    Reply

  31. August 16, 2013 at 4:51 am, Dnyaneshwar Pote said:

    yes,, it’s working thank you,,,

    Reply

  32. November 11, 2013 at 2:42 pm, J. Albert said:

    It worked!!! Awesome!!! :D

    Reply

  33. February 13, 2014 at 5:36 am, Winter MC said:

    Worked for me, just changed it to

    Reply

  34. March 29, 2014 at 6:09 am, Steve Thomson said:

    How do I make a custom image with letters and characters (S~W) in a box with orange background??
    Thank you!
    jsgthomson

    Reply

Leave a Reply