Create a custom Favourites icon

December 1, 2007

A Favicon is such a little thing (16 x 16 pixels to be exact) but having one on your website/blog really makes you feel like you’re moving up in the world. A favicon is the little icon which appears next to your website title on the menu bar in Internet Explorer/Firefox etc. It also appears next to your website title in the Favourites menu if someone saves your site to their favourites.

By creating a custom favicon of your own using your logo or part of your logo, you both reinforce your brand and make your website stand out amongst the sea of Internet Explorer blue ‘e’ icons which most websites feature by default. Note the tiny black circle with the green ‘W’ next to my website address at the top of this page. Now save this website to your favourites and see what happens….

How to Create Your Own Favicon

  1. Decide what image you’d like to use. It is going to be really small so you may want to use only part of your logo. You want it to be clear whether it’s an image or a letter. (See my best favicons list below for ideas)
  2. Go to http://tools.dynamicdrive.com/favicon/ to create your Favicon.
  3. Upload your image and create favicon
  4. Using an ftp program (see my post on ftp of you don’t have it already) upload your new favicon called favicon.ico to your main website directory.
  5. Insert the code below in the head section of your main index page (homepage).
  6. <link rel=”shortcut icon” href=”/favicon.ico” mce_href=”/favicon.ico” />
  7. It took a couple of days for my new favicon to appear online so just keep checking.

My Favourite Favicons

NOTE: I originally read about favicons on the Java Script Kit website.

Filed Under Search Engines, Website Ideas · 3 Comments