Sunday, August 23, 2009

Making a favicon

I just made a favicon for my website. What is a favicon? It’s that teeny tiny square icon thing-a-ma-jig next to the website URL, in the address bar of the web browser. Most big companies have them. If you bookmark some websites so you can get to them faster, the favicon can help you find them more quickly. This is because many people “read” visual images faster than words; it’s why we have many traffic signs with symbols on them rather than words.

I started out with this square chunk cropped from my logo:

In Photoshop, I saved it as a 16-pixel square image and resampled the image using the bicubic sharpener (this keeps the image from blurring as it is resized). Here’s how it looks blown up:

And here’s how it looks at actual size:

Cute! You can see how it looks in a web browser by going to my website,

Have a website and want to make your own favicon? Here’s a great tutorial by Jennifer Apple on how to make one in Photoshop.


  1. works with Firefox - GREAT JOB!

    Too bad this tutorial isn't for those of us with a MAC.

  2. umm... Dale Anne, I have a Mac! and it worked fine.

  3. Awesome Susan! I've been wanting to make one of these for YEARS but never even knew the name of the thing-a-ma-gig.

    Definitely trying it today!

  4. Just found:

    Much easier to generate if you don't use Photoshop. Just make sure your photo is either 16 x 16, 32 X 32, 48 x 48, or 64 x 64 and it will create the favicon.ico for you.

  5. Susan,
    This is I just need photoshop!!!


I love it when you leave comments… Otherwise I feel like I'm just talking to myself! If you have time to write, please let me know what you think.