You know when you load a URL and there is a little image in the address bar? Have you ever wondered how that gets there, and how you could have one for your page? Wonder no more!

It’s called a favicon, and it’s actually really simple to do. You just need a little html coding nous.

  1. Create an image that is 16×16 pixels. I just use Paint for mine, as it was really easy.
  2. Save the file as favicon.ico (ico is a file extension).
  3. Use your ftp program to upload favicon.ico to your root directory - e.g. for this site, I whacked it straight into the womanvsweb folder.
  4. Go into your web page (in WordPress this is under Design/Theme Editor in your Dashboard) open the header.php file or your index file and insert the following code: <LINK REL=”SHORTCUT ICON”
    HREF=”/~your_directory/favicon.ico”>
  5. This code should go immediately before the </head>  tag
  6. Replace /~your_directory/ with the URL of your site, e.g. http://womanvsweb.com/ NOTE: I found that if I put the www. before my website name in the link it didn’t work - experiment to see which works for you.
  7. Reload your page, and you should see your little icon pop up in the address bar!

It gives your site that little edge - wow, they know how to do that? They must be an expert…
For a more in-depth explanation, have a look here. I tried a few other methods, but this was the one that actually worked for me!

This post has 2 comments. Add your own.

  1. Thanks! I was getting hung up on getting my favicon working because I was leaving the http://www. before my website name in step six. My guess is that this peculiarity has something to do with Dreamhost, since we’re hosting there.

    30 Jun 08 at 9:35 am #
  2. Glad to help, Jason - it was driving me crazy before I figured it out!! :)

    30 Jun 08 at 8:37 pm #

Post a comment