HTML Basix - HTML tutorials and online webmaster tools


Htaccess code generators Code generators Tutorials

Online and offline code generators


Subscribe to RSS feed
Subscribe to the HTML Basix RSS feed.

HTMLBasix fully recommends Hostmonster as your host of choice.
Masses of space, transfer, great uptime. All for a VERY affordable price!>

Favicon Icon


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 they'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.

try these: Want some cool astrology icons for your favicon? Try MoonsWeb favicons!



free icon editor free icon converter download free icons

The steps to putting a favicon.ico on your website are:

  1. Create a 16px X 16px, 16 colour image with either a .bmp or .gif extension.
    1. Your graphics editor should have a setting for 16 colours. It needs to be 16px X 16px, anything other than this will be ignored by browsers most times.

      Another option is to download a free icon editor and make your own through that.

  1. Convert your image to the .ico format if it's .bmp or .ico.
    1. You can't just rename the image extension - it HAS to be converted with a special program or it won't work. Use an icon converter, then save the converted file as favicon.ico. If you are creating several icons to use, call each one something different - but remember it needs to have the .ico extension.
  1. Upload your favicon.ico into the root directory of your website.
    1. The root directory is where your main index.html page is. Browsers look for the favicon.ico here. If you're providing a link in your pages to the icon, then you can store them wherever you wish - in a folder just for icons, on another server, as long as you provide the path/url to where it is so browsers know where to look for it.
  1. Insert a link to it in all your pages that you wish to use the favicon.
    1. If you have called your icon favicon.ico and you uploaded it into your root directory, you don't NEED to put any code in your pages. However, sometimes the favicon won't show for some browsers, so to put a link in might be a wise thing to do. You will also need to put a link in if you want to use something other than a file called favicon.ico or if your site is a subdomain or a free hosted site (ie: not your own domain name). This is because you need to tell the browser to look for THAT image for that page in THAT folder.

      Put this piece of code somewhere between the <head></head> tags on your pages:

    <LINK REL="SHORTCUT ICON" HREF="http://www.yourdomain.com/name_of_icon.ico">

      If you have a 'secure' site, you will need to provide the path using https:

    <LINK REL="SHORTCUT ICON" HREF="https://www.yourdomain.com/name_of_icon.ico">

That's about it. If you've gone through these steps, you can try bookmarking your page to see if the favicon shows up. Of course, if you already HAVE the page bookmarked, it won't show - as your browser checks for the favicon at the time of bookmarking. You will find if you remove your site from favourites and add it again, it probably won't work still, as there will be traces of the bookmark left somewhere on your computer so it won't check. The best way to test it in this case is to get a friend to do it.

I'm confused - what steps do I need to do?

  • I have downloaded a favicon.ico and wish to use it on my site:
    1. step 3 (step 4 optional)
  • I have a couple of icons I want to use, for different pages:
    1. step 3, step 4
  • I have a gif or bitmap image I want to use for my favicon.ico:
    1. step 2, step 3 (step 4 optional)
  • I have a site on Geocities or Tripod and I have my favicon.ico that I wish to use:
    1. step 2, step 3, step 4
  • I'm a glutton for punishment, and would like to create my own favicon.ico:
    1. step 1, step 2, step 3 (step 4 optional)



    Site Stats     
    VisitorsPageviews
    Total: 8,347,101 Total: 22,222,290
    Today: 1,181 Today: 3,987
    Yesterday: 1,186 Yesterday: 3,353
    Past Month: 36,766 Past Month: 103,943

    1,238 visitors in the last 24 hours
    This page has been visited 540,364 times
    There are currently 15 visitors online
    click to see where
    most people online at once:
    286 visitors on 06/27/2012
       You beaut











    This site is © HTML Basix 2003 - 2009