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 www.your-site.com/favicon.ico.
  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=”http://www.your-site.com/path/to/favicon.ico”>

{ 7 comments… add one }
  • LGR May 30, 2007, 9:55 am

    Good post. I have used that favicon generator in the past and it works well. Sometimes I don’t have the time or creativity to make my own and have found some great free favicons here: http://www.freefavicon.com/

  • salvador April 1, 2009, 3:34 am

    Porqué no tengo el atributos shortcut icon en la etiqueta rel

  • Favicon Generator October 31, 2010, 3:48 am

    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 @ http://favigen.com/ is a Favicon Generator which will allow you to create a favicon for your website.

Leave a Comment