How To Avoid Creating These Terrible Favicons

Favicons, those 16X16 ico files which represent a particular URL have been known to be pretty, but there are some favicons out on the web that are just plain awful. Despite their size, a good favicon helps out your readers in a number of ways. For instance, if you use FireFox and have a number of tabs opened, each tab displays the favicon of the website that tab has loaded. Also, a favicon that has been aesthetically designed will give your site a better chance of being seen when mixed in with a ton of other websites. Not to mention, a great favicon would inspire other designers as well as possibly having your site featured in a post which discussed the best designed icons.

However, this post will contain seven examples of poorly designed favicons that you should avoid creating yourself. Afterwards, I give you a list of hints, tips and resources to create your own special icon.

– Stock Option Advisors
– HBSMC
– Touchofdeathgaming
– WeGiveYouCredit
– Favicon Found Within This Blog Post
– Havenworks Voted worst designed website by Digg and everywhere else.
– Google’s brand new favicon which has acclaimed quite a bit of negative press.

If you are in possession of a less than stellar favicon, use one of these services to easily create yourself a new one.

Favicon Generators

GenFavIcon – Three step icon generator

Convertico – Convert ICO to PNG files or vice versa. Favicons are in .ico format

Dynamic Drive Favicon Generator – Favicon Generator created by Dynamic Drive

FaviconGenerator – Upload a photo from your hard drive and generate a favicon out of it

Webscriptlab Favicon Generator – Favicon generator created by Web Script Lab

The Manual Way:

If you don’t want to use any of the services offered online for free to generate your icon, you can create one manually with Photoshop or another piece of graphic design software which supports the .ICO format. If you are going to use Photoshop, make sure you download the ICO file format plugin which can be found at Telegraphics. Then, read this tutorial called Mysteries Of The Favicon.ico written by Jennifer of Photoshopsupport. This guide will walk through all of the steps to manually create a favicon within Photoshop.

For the truly geeky people out their, you can use something like png2ico which is a command line like PNG to ICO converter.

Inspiration:

If you are looking for inspiration in creating a favicon, I highly recommend browsing through the MpP favicon galleries. These galleries are filled with high quality, awesome favicons which have been collected by Michael P. Pierce. After browsing through these galleries, you should have a good idea as to what quantifies as a good design within a 16X16 pixel package.

If that doesn’t suit your creative fancy, head on over to DeviantArt.com and perform a search query for Favicon and check out the designs that have been created by the DA community. DeviantArt is host to the largest collection of digital art work in the world.

Inspiration as well as design tips can be found on 1favicon.com within an article entitled, Favicon Inspiration.

Then you have Smashing Magazine who posted an article which contained 50 high quality favicons to stir up creativity.

Conclusion:

If you didn’t think Favicons were important, check out this site called Bring Back The Old Google Favicon. A website dedicated to bringing back the old familiar 16X16 little image that everyone seemed ok with.

As I’ve discovered on my own, fitting a good quality design into a package that is only 16X16 pixels is a difficult task. However, using the services listed above in combination with the resources of inspiration provided, the task of creating these difficult icons should now be much easier.

Here is what I’d like to know from you. First, which tactic have you used to create your own favicon? Secondly, I’d be interested in finding out if there are any other poorly designed favicons besides these seven. I looked high and low and couldn’t find many that were this bad.