How to create a favicon.ico for your web site

This brief tutorial will show you how to create a unique favicon.ico (that icon in your address bar – ex. Simplehelp’s favicon.ico is ) for your own site.

A favicon (short for Favorites Icon) is a great way to give your site a memorable and unique icon that will display in the browser address bar. In addition, favicon’s show up next to ‘your site’ when people bookmark it, and since most folks have a very messy bookmark list, a graphical reminder of your site beside the bookmark name it is a good way let them find it again.

  1. First, select the image you want to use as a favicon. Something that blends in with your sites look, colour scheme and general “feel” is best. Since favicons are quite small, it’s a good idea not to try and get too complicated. The image you choose should be a square (64×64, 32×32 etc), and can be a jpg, gif, png, bmp etc.
  2. Next, visit FavIcon from Pics – an absolutely brilliant (and free!) online tool that can generate a favicon from a picture, logo or other graphic
  3. Upload your picture and click the magic Generate Favicon.ico button. You’ll be given a preview of your favicon, and if you’re happy with it, click the Download Favicon button. Favicon from Pics will prompt you to save a .zip file – save it to your desktop or wherever you prefer to save files. Unzip it.
  4. Fire up your favorite FTP program (or whatever tool you use to upload files to your web site) and upload the favicon.ico file to the root of your site*. You’ll want the file to be located at
  5. Visit your web site to check out your new favicon! If it doesn’t appear, you may need to clear your browsers cache and then reload.
  6. * = if you don’t have access to the root of your site, add the following line of code somewhere in the <head> of your html:

    <link rel=”shortcut icon” href=””>

7 thoughts on “How to create a favicon.ico for your web site”

  1. I found the post just real great as it should be on favicon creation. I have extract a nice definition of favicon………………. Favicon short for favorites icon- did you know? Nice huh ?
    Favigen @ is a Favicon Generator which will allow you to create a favicon for your website.

  2. Pingback: Favicon Design : ..:.:.. Todd And = Marketing + Media ..:.:..

  3. Pingback: How to revert to the “old” Google favicon - Simplehelp

  4. Pingback: WordPress: The Complete Post-Install Checklist, Redux - Simplehelp

  5. Pingback: 20 Free RSS Readers Reviewed - Simplehelp

Leave a Comment

Your email address will not be published. Required fields are marked *