make a favicon

What’s a favicon?

How do I make a favicon or just get one for free?

A favicon is the tiny 16px by 16 px image that appears on the left most side of your browser’s address bar. It was originally named for the phrase “favorite icon” when bookmarking became the rage. Now it’s part of the standard practices for a webmaster or webmistress to create a unique favicon for each website.

When an image is so small, it requires a special creativity to make something that users are going to be able to instantly recognize. Take a look at these examples:

Google.com
Yahoo.com
Facebook.com
IBM.com
HP.com

In each case the favicon is easy to recognize and surfers can identify the site… actually identify the branding instantly.

Now, if you’re like me and you have limited natural artistic abilities, but you being a kick butt webmaster and designer can adapt anything you ever saw in your life using PhotoShop or FireWorks or Corel, lets make some favicons !!! If you can’t jack any drawing you ever saw using PhotoShop there is still hope, there are collections of free favicons all over the internet. More on that soon.

Start with the Easiest

The easiest favicons to make consist of a background and a single big letter. I start by making an image that is 100px by 100px, convert it to a .jpg, and save it with an under 30 KB filesize.

Search on Google for the phrase “free favicon generator” and my 2 favorites show up:

http://tools.dynamicdrive.com/favicon/
and
http://www.favicon.co.uk/

Follow the instructions and your result is a file that is always called favicon.ico

You can place these anywhere in your websites hierarchy, but this meta tag will help your browser and keep you from having to drop these all over the place like Johnny Appleseed the way some webmasters used to do it:

OK, where are the free ones? Search on Google for “free favicons” and my favorite is:

http://www.freefavicon.com/freefavicons/objects/

If you want to get more advanced I’ve seen animated favicons that looked cool… check these folks out at:

http://www.animatedfavicon.com/