They are struggling to raise enough money for a proper memorial, can you please help?.
I love graphic design. At least I love good design when I see it, not that I can actually design myself. And, I’m a packrat by nature so a gallery of favicons is a natural thing! It’s just amazing what some people can make happen in a square that’s just 16 pixels in size. If you have any favicons that you would me to include in this gallery, please let me know.
zeldman.com
What can you say? He’s the master! The little blue hat shows up again in
a great portrait icon that replicates the image of his book. The white background,
rather than transparent, doesn’t look as good on a grey toolbar/menu. Strange
that multiple sizes are provided but the actual image doesn’t change size.
sizes: 16, 32, 48
stopdesign.com
The original Stop Design logo. Simple, interlocking geometric shape that uses
whitespace to form the “S”. Uses the colors from the site and has
a transparent background. Very nice & very clean.
sizes: 16, 32
stopdesign.com
The new site logo after the latest redesign. Fits in very well with the entire site,
utilizing the same color scheme. Unlike the old logo, I can't quite see where the
“s” and “d” are in this logo, but maybe I’m not supposed
to see it. Very clean lines and works well at both resolutions provided.
sizes: 16, 32
photomatt.net
Great cartoon portrait; lots of character. Looks great even at the small size.
sizes: 16, 32
modulo26.net/daily
Great, simple symbol that ties in with the flight theme of the entire site.
sizes: 16, 32, 48
clagnut.com
Simple icon that uses typography and color scheme of site; fits right in.
sizes: 16
mezzoblue.com
Logical choice for mezzoblue’s icon, a symbol used in the site masthead. At first
I didn’t like the icon much. The pale color against the white background. The
icon is too fuzzy and you can’t discern the shape, it’s too subtle. Then
I thought about its use on the site, which has always been fairly subtle itself.
Maybe that’s the point? I don’t know…still kind of blurry at
the 16 pixel size…
sizes: 16, 32
csszengarden.com
The oriental character fits right in with the main theme/design on CSS Zen Garden. The
32px version is very nice and clean. I’m surprised at how legible the 16px version
is, given the complexity of the character. The transparent background is a nice touch.
sizes: 16, 32
chunshek.com
Amazing color that works well even at 16 pixels. Doesn’t fit in with the
design of the site, though.
sizes: 16, 32, 48
1976design.com
Very simple, “stick figure” lettering icon using the site name. Given the
rich graphic nature of the site, this icon is a bit of a let down. But, it’s
easily identifiable!
sizes: 16
adampolselli.com
Bright color that catches your eye and uses common “@” symbol. Placing the
symbol off of the lower, right edge gives it some visual interest. Same image
is used in the site’s header graphic.
sizes: 16
alistapart.com
Uses the typography and color from the site’s ALA acronym. Works really well with the
current site design.
sizes: 16, 32, 48
apple.com
The classic Apple icon in simple white on grey; no surprise that it matches the color
scheme Apple uses for everything. Simple, looks great, easily recognizable. What
else would you want?
sizes: 16, 32
designbyfire.com
Great use of the site’s dingbat/icon. Easy to recognize and love the color; it’s
the new black, right?
sizes: 16
firewheeldesign.com
Uses the site’s dingbat/logo. Looks great and nice colors. Loses a little in the
translation down to a 16 pixel size but still very recognizable.
sizes: 16, 32
geocaching.com
The site’s logo works much better that I would have imagined, even at the 16 pixel size.
It’s a little fuzzy, but not too bad. For those that are familiar with the site, it’s
very recognizable right away.
sizes: 16, 24, 32
hicksdesign.co.uk
This favicon is a common design element used throughout the site. Nice color and looks great, although the color
looks to be a little different than the one used within the site. Maybe my eyes are going buggy.
format: ICO
andybudd.com
This favicon is a common design element, the site’s dingbat. I like the shadow/3D effect.
Kind of like Hicks Design, isn’t it? Andy says that his favicon is a “complete rip of John Hicks’
” (Andy’s words, not mine! :), so the similarity isn’t surprising.
format: ICO
imdb.com
Yikes! This definitely looks like something I would make. Yuck! What’s the point of using
lettering that you can’t even read? The “M” and “b”, which is
supposed to be lowercase, aren’t legible at all. The icon doesn’t even use the
entire vertical space available.
sizes: 16
movietickets.com
Adaptation of the site’s logo into something that works well at 16 pixels. Rather than
trying to squeeze the entire logo into a small space, they’ve taken just the first letter.
Very strong image and reinforces the site’s branding. Only contains a 32 pixel icon and
lets the browser shrink it down to 16 pixels.
sizes: 32
netflix.com
Uses the site’s bright red color and has a simple, recognizable icon to represent the
company’s product. Shifting the DVD image off the lower left side adds visual interest.
Amazing that it works so well with just 16 colors.
sizes: 16
mlb.com
Pretty resonable version of baseball’s logo at this size. They maintain the
landscape orientation and leave the extra space above & below the logo as transparent.
The simplicity of the logo shows through in making this icon work at such a small size
(unlike the NHL’s logo…)
sizes: 16
nhl.com
The NHL’s shield logo just doesn't work well at this size. With the logo repeated often
on the rest of the site, and if you really know the NHL well, you can figure out what it’s
supposed to be, but do I really want to try that hard?
sizes: 16
nfl.com
Like hockey, like football? Another shrunken logo, this one using the NFL’s logo. This
one works better than the NHL’s, probably because of the color scheme. The red-on-white
survives the shrinking better. Without context, though, it’d be a little tough to
figure out what the image is.
sizes: 16, 32, 48
npr.org
Shrinking the NPR logo results in some awfully small letters. Since the same logo is used
throughout the site, it’s easy to figure out what it is. I wish it were more legible.
Th eicon doesn't take advantage of the full 16 pixel space available; over 10 pixels of wasted
vertical space.
sizes: 16
amandabeard.net
Just the initials of the swimmer this site pays homage to; nothing fancy, but it works.
Uses vertical and horizontal space well with the diagonal positioning of the letters.
sizes: 16, 32, 48
athens2004.com
The famous rings shrunk down to 16 pixel size. It works reasonably well; a little fuzzy.
sizes: 16
boxesandarrows.com
The site’s logo is already simple and a single color, so it works very well
as an icon.
sizes: 16
chevy.com
Another corporate logo that ends up just too fuzzy when it’ shrunk down to this
size. The image just loses it’s shape too much. Why do they think this is ok?
sizes: 16
cms.hhs.gov
What? A government site with a favicon? A very simple image that just uses the site’s
color scheme. Very colorful and it turns out pretty nice, I think.
sizes: 16
cssbeauty.com
I'm not sure what a lamp has to do with this site, but I like the image. This is an icon that
works well at 16 pixels but falls apart when it’s stretched to larger sizes. Too bad
larger versions weren’t included. Pretty cool what you can create with shades of grey.
sizes: 16
denyerec.co.uk
Why do I always think of iliveonyourvisits Gabriel when I see monkeys? Something disturbing in my past,
I think. Great image of a monkey with vibrant colors and interesting visual presentation.
Amazing how you can show just part of a monkey’s face and convey the full image. Works
well with the site’s color scheme.
sizes: 16
wikipedia.org
Just a simple letter, but by using the site’s unique font from their logo, it’s
immediately recognizable. Simple and effective.
sizes: 16
google.com
Google’s well known font just doesn’t come across well in their favicon. There are colored
borders that use Google’s primary color scheme, but at 1 pixel wide you just can’t see them.
Google does such a good job managing their brand; too bad they missed the mark here. Maybe
the IPO distracted them too much?
sizes: 16
themaninblue.com
Builds on the vibrant blues used in the sight design, a simple “T” does the trick.
First favicon that I've seen that changes images with the larger icon size. Pretty cool.
sizes: 16, 32
themaninblue.com
Recently revised, here’s Cameron’s latest version of The Man in blue. This time, the 16px version shows
a man rather than just the letter “T”. Unfortunately we lost the very nice 32px version of the man
from the old icon. Just something about this color blue I love.
sizes: 16
researchkitchen.de
Can’t put my finger on it, but I love this one. The association of “kitchen”
to silverware is great. Also love the use of negative space (white) to create the image itself.
The icon is used throughout the site and uses the same color scheme.
sizes: 16, 32, 48
sliceny.com
An icon with a sense of humor; either that or I’m getting hungry for lunch. The site
is a NYC pizza weblog so what else would you use for a favicon? Like the use of whitespace
to create pepperoni on the pizza. What’s really interesting is that the favicon
looks like it’ the missing slice of pizza from the site’s logo!
sizes: 16
powazek.com
This one is really unique! The icon is an image of the site’s homepage. Pretty cool.
A little tough to see at first, but once you’ve seen the homepage it’s
recognizable.
sizes: 16
stuffandnonsense.co.uk
Makes me think of Snoopy and his fights with the Red Baron, but I’m sure that’s
just because I’m American. Nice symbol that’s probably very recognizable to many people.
Doesn’t really seem to fit, however, with the theme of the rest of the site. Only has 32
pixel version defined and lets the browser shrink to 16 pixels.
sizes: 16
2monksandamoose.com
I have no idea what the graphic is supposed to represent, but it’s taken from their
logo. It’s distinctive and ended up with a good icon by using just a portion of their
logo and not trying to fit the entire thing into a 16 pixel space.
sizes: 32
37signals.com
Simplified version of their logo, using square edges rather than round. Distinctive and works
well at the small size.
sizes: 16
MpPierce66
My own meager attempt at a favicon. This is the way I sign my initials and matches the way
I type my initials “MpP”.
sizes: 16
456bereastreet.com
Dingbat used on the site’s blog as a graphic element for each article heading.
Simple design & recognizable.
sizes: 16
accessify.com
The site’s logo broken down into a grid format. At the 16 pixel size, it’s kind of hard to
discern the checkmark from just some random colored blocks on a grid. A little better at the
32 pixel size, but not a lot.
sizes: 16
adactio.com
Photo portrait of the site’s author. Looks like the same photo is used on the site About
page. The face isn’t easy to see at a 16 pixel size, but it stands out. A 32 pixel
version would be nice to see.
sizes: 16
adaptivepath.com
I’m not really sure what the little white line is supposed to be, but it matches
their logo on the site. Green matches site colors although I would rather have seen
the more distinctive lighter green that is more dominant on the site.
sizes: 32
airbagindustries.com
This distinctive “A” icon/logo is used throughout the site. I really like the way the bright color
stands out and like the logo. The letter is a nice font and has a bit of a worn look. Really wish that the image
itself increased in size along with the various icons supplied.
sizes: 16, 24, 32, 48
alazanto.org
Great icon! Uses the site’s overall brown background with white font so the letter
really stands out here. Even has a bit of the site’s border effect on the icon.
Bringing the “A” off the right edge of the icon is a nice effect yet the
letter remains easily identifiable as an “A”.
sizes: 16
allinthehead.com
Pretty good icon for a blog about web development. Simple and very recognizable by anyone
that develops for the web (the site’s audience).
sizes: 16
antipixel.com
Takes me back to my childhood; I loved my ViewMaster! Taken from the
site logo, the graphic is simple and easy to recognize. The red background makes it
really stand out.
sizes: 16, 32
aol.com
No surprises here, other than the fact they didn't use the little yellow running guy.
AOL’s standard triangle logo. Only provided in 32 pixel size & they let the
browser do the shrinking.
sizes: 32
bestkungfu.com
Simple and to the point. Uses the acronym for the site name and matches the site color scheme.
Very readable for squishing 3 letters into such a small space.
sizes: 16
brookelyn.org
Just the letter “B”. Works with the site’s background colors of grey and black.
Not sure if the icon is supposed to be the same font as the one used in the site masthead or not.
sizes: 16
cameronmoll.com
Great icon that takes the key element of the site logo, the overlapping “n” and
“m”. Sometimes the best icons are the simplest. Contrasting black and grey
are also a nice touch.
sizes: 16, 48
chasingfunction.com
A play on the word function for all of the math geeks out there! Simple icon, but I think
the lettering is a bit thin and reduces legibility at this size. Like the play on words.
sizes: 16
4webhelp.net
This one is pretty awful. Granted, the number 4 is key to their site name, but this
icon is bad. The lines used to draw the 4 are so thin, you can almost miss the fact
that it’s an icon. The lines are also taken all the way to the edge of the icon
and in a browser window it looks pretty awkward (the icon is helped out on this page
because I put some padding around it).
sizes: 16
abc.com
The television network’s classic logo. Works well even at a small size.
sizes: 16
cbs.com
CBS’ classic “eye” logo shrunk to fit the small world of favicons.
Looks great and works better than others that rely on their acronym for their logo. Simple
graphics just translate better.
sizes: 16
nbc.com
Must watch the peacock, I guess. Their logo is easy to pick out, although it suffers a
bit by being limited to 16 colors. They also didn’t take advantage of the full icon size,
ending up with something that’s only 8 pixels high. Maybe if they had zoomed in a
little and not tried to fit the entire peacock into the icon, it would have worked better.
sizes: 16
automaticlabs.com
A snippet of the image from the site masthead. Works really well at the small size and with
just 16 colors. Does a great job of reinforcing the masthead theme.
sizes: 16
collylogic.com
Plain old letter “c” taken from the site masthead, using the same
background color. The white text on dark background color stands out nicely.
sizes: 16
daringfireball.net
This icon is the inverse of the image used as part of the site’s logo. The icon
background matches the site’s page background, which is the only page decoration used.
So the page is saturated with this color and the icon fits right in. Switching to the white
star on dark background was the right choice.
sizes: 16
deltatangobravo.com
The site’s masthead/logo uses an airplane image, and with the call sign motif,
this icon fits right in. The white icon on black background is replicated from the site
as well.
sizes: 16
dell.com
Dell chose the distinctive letter “e” from their logo for their icon.
Easily recognizable although, for some reason, I just don’t think of Dell when I
see the letter “e”.
sizes: 16, 32
digital-web.com
The Digital Web Magazine logo in miniature. Works well, although it’s on the
border of losing too much detail.
sizes: 16
annevankesteren.nl
A simple symbol that makes a good icon, but I have no idea what it has to do with this site.
It’s provided as a PNG file, though, rather than an icon file. Works fine with
“good” browsers, but IE ignores it.
sizes: 32
comcast.net
Comcast’s double “C” logo, found all over their .net site but not
on their .com site, curiously enough. Red color contrasts well with the black and is
awfully familiar for any Comcast customers. The border around the outside edge
of the icon is too thin and doesn’t work very well; it disappears at smaller sizes.
sizes: 32
mailcenter.comcast.net
Very strange. Comcast’s web mail pages don’t use the standard Comcast logo! Why
would you use anything other than your company logo. I’ve come across this same
icon on a Sony site; leads me to believe that the logo is really someone else’s. Someone
that develops web apps for bigger companies maybe? But why would you give up your own
branding? Very strange…
sizes: 16
dictionary.reference.com
Great icon for a reference site — books! Having the image continue off the
edge of the icon really gives the feeling that there’s an entire shelf of books.
The 16 pixel version is actually cropped (only 2 books) to look better at the smaller size.
First icon that I’ve seen that has a monochrome version of the icon.
sizes: 16, 32
diveintomark.org
Classic Yin/Yang symbol and it looks good. Not sure how it fits into the site, however.
I would rather have seen an icon that reflects the nice grid graphic used in the
site header.
sizes: 16
fox.com
The Fox mothership icon. Pretty interesting that they use a black & white icon
for the 16 pixel size and then change to a color icon at the larger 32 pixel size. I
think I’ve seen the same thing done on their DVD packaging.
sizes: 16, 32
foxbox.tv
A fun version of the Fox icon for their kids channel, Foxbox. They only provide a 32
pixel version of the icon, which doesn’ survive scaling down to 16 pixels too well.
It gets pretty hard to read at the smaller size.
sizes: 32
foxnews.com
How many ways can Fox change their icon? They don’t have strict rules for
branding and they clearly use different firms for their web design. Fox news focuses
on the 2 searchlights for their icon. Darker color scheme matches the one used for their
actual news broadcasts.
sizes: 16
foxsports.com
Here’s the Fox Sports icon, just the word “Fox” in big letters.
Works well and stands out at the small icon size.
sizes: 16
foxstore.com
This is the icon I remember at the beginning of all of the movies! This is one of
those icons that I can’t believe that it actually looks good at such a small size.
The graphic seems like it would be way too detailed to be recognizable at such a small
size. How do they do that?
sizes: 16
confluence.org
This site is a project to take pictures of every confluence on the earth, the places
where major latitudes and longitudes intersect. So, using a cross-hair symbol makes
perfect sense. Just wish they had created a 16 pixel icon instead of letting the
browser shrink the 32 pixel picture they provide. In fact, the smaller version looks
much better on this page than it does in Firefox; the crosshairs disappear completely.
The dark green tends to blend into the black background too much as well; colors
with more contrast would have worked better.
sizes: 32
dubtastic.com
Nice graphic effect on a lowercase letter “d”. Nice change of pace from
using standard fonts. Doesn’t really match any of the typography on the page,
but that doesn’t really matter; looks good.
sizes: 16
eleganthack.com
I think that’s some sort of information architecture diagram along with the site
initials. Although not great graphics, it strikes me the icon actually fits the site
name very well. Communicates a big topic (information architecture) in a little graphic;
that’s pretty elegent. Yet the graphics are sort of a hack. Hmm..maybe that was
on purpose?
sizes: 16
ephemera.org
Takes a portion of same moth/insect used in the page footer for the site. On it’s
own, I had no idea what the icon was, but it became clear once I found the reference
on the original page. Icon uses the same grey tones used on the site, which highlights
photography, so the muted tone lets the photos stand out.
sizes: 16
fookes.com
The Fookes Software logo which, to me, looks like an “E” and a backwards
“F”. I have no idea what the E is for. But, it’s a simple logo
that translates well to a small icon. The full logo includes the word “software”
in small print. They tried to bring that through on the larger, 32 pixel icon and it
just makes a mess of it. Should have left that out.
sizes: 16, 32
franklincovey.com
Basic company “compass” logo; looks good & works well at the small size.
sizes: 16
gordonmac.com
Don’t know if this is a self portrait or just a photo, but fits with the
imagry used on the site masthead. Interesting monochrome color and looks good.
sizes: 16
graphikjunkie.com
Same “walking person” icon used in the site logo and several places
throughout the site. Matches the color scheme used on the site as well. Looks nice
at both resolutions provided.
sizes: 16, 32
hchamp.com
Sometimes a single letter is enough, especially when it’s your first initial and
is highlighted in your domain name. Muted grey tones with a nice 3D effect; makes it look
like a button.
sizes: 16
hivelogic.com
Caught this one just before the site redesigned. Nice portrait photo of someone smoking
a pipe in just black & white photography. The 32 pixel icon still looks good when
shrunk by the browser down to 16.
sizes: 32
hivelogic.com
Smaller version of the site logo after the redesign. Looks kind of like a wax seal. Nice deep
red color stands out well when bookmarked, etc. Would look better with a transparent background.
sizes: 16
iconfactory.com
It’s an icon of a factory…how fitting. Nice bright color stands out although
the gradient effect isn’t as nice at the smaller size.
sizes: 16, 32
knopdesign.net
Nice rich colors and a nice translation of the site logo into icon format. The icon is
actually a rhombus (I think that’s what it’s called when a square leans to
one side). For the icon, the lines are straightened up to simplify things, but it still
ties back very well to the original. I really like the color scheme and simple lines.
sizes: 32
lipsum.com
The value of a Lorem Lipsum generator? The generatd words, right? Makes perfect sense
to use the beginning of the word “lorem” as their icon. The site uses a very
black & white color scheme and the icon matches. Like the way the word runs off the
right edge of the icon.
sizes: 16
qwestdex.com
Can a background also be a logo? I think Qwestdex is going that route. This is the
background for their site as well as the background for the cover of the yellow
pages themselves. The colors are really vibrant and play off of each other well.
This 32 pixel icon works equally as well at the reduced 16px size.
sizes: 32
pcmag.com
Amazingly enough, this 32px icon looks better at 16px than it does at 32px. For anyone
that’s read PC Magazine, the logo is instantly recognizable and in pixel form the
white lettering on red background is very readable. When shown at its full size,
however, the lettering gets blurry and sloppy. The magazine uses that logo so often
you’d think that they would have a clean version at all sizes.
sizes: 32
mapquest.com
Mapquest’s very familiar little “m”, first letter from their logo.
Unfortunately, it didn’t survive the transition down to 16px very well. The
logo just looks a little sloppy, recognizable, but sloppy.
sizes: 16
asterisk.com
Great little dingbat that is used throughout the site. Like the fact that only a
portion of the dingbat is used rather than squishing the entire thing into a
16px square. Leaves it very easy to recognize & very clear. Found out from reading
an article on the site that the symbol was taken from a snowflake font. The file is
physically a GIF but served up as an ICO; I have no why browsers deal with that well,
but they do.
sizes: 16
mojombo.com
Really like this icon. The symbol is used in the site masthead, just in grey. I like
the use of the bright red here against the grey background. Really makes it stand out.
There are also 2 other versions of the icon in the file, but they are corrupted somehow.
The only one that works is the 16px 24b color version. Would have been nice to see a true
32px version.
sizes: 16, 
webstandardsawards.com
A gold star for a site that gives out “awards”? Perfect! Very nice icon
that is also used in the site masthead.The star has a nice border and dropshadow
effect that I don’t think I’ve seen in a favicon before.
sizes: 16
justwatchthesky.com
Very nice image. The same exact icon is used in the site logo and a larger heart graphic
is in the masthead. The blue from the site’s color scheme is brought into the icon
as very subtle shading around the edges. The colors on the site, however, are so strong
and vibrant, I almost wish that more of the blue color was used in the icon as well. Given
its placement on the red background in the masthead, I understand bringing in the white to
help the icon stand out from the background.
sizes: 16
pseudoroom.com
I believe this is supposed to be the letter “p” inside of a square made
with a single, unbroken line. A red version in the footer is the only other time
it’s used within the site, so it’s not emphasized much within the design.
It’s a cool looking icon, though. Interesting that multiple color depths are
provided but just the single 16px size.
sizes: 16
jmby.nuabi.com
Uses the initial letter “J” from the logo utilizing the same font and a
dropshadow. Colors match the overall site design. Nice rounded corners as well.
sizes: 16
orderedlist.com
A nice icon that represents the site’s namesake. Probably only makes sense to
web developers, but that’s the target audience. Good icon with a sense of humor.
sizes: 16
seriocomic.com
Kind of a squared–off yin/yang symbol, I guess. Makes great use of the browns
used for the site’s color scheme. Simple & distinctive.
sizes: 32
webstandards.org
The Web Standards Project “WaSP” simplified for a 16px icon. Looks good
and is a good representation of the logo.
sizes: 16
simplebits.com
The immediately recognizable blocks from the simplebits logo and used throughout
the site. I really like the fact that 2 blocks are included in the larger icon
size instead of just making the single block bigger. Great job.
sizes: 16, 32
web-graphics.com
A mini–me Web–Graphics logo. Keeping the right-alignment used throughout
the site and in the site logo is a really nice touch with the icon. Very readable,
even at the 16px size.
sizes: 16
veer.com
The Veer logo fully replicated as an icon. For me, it’s just too blurry at this
size. The Veer logo is very recognizable and your eye can look past the blurriness.
But I think I would have rather seen something else that was much cleaner.
sizes: 16
wheresgeorge.com
One of my favorite sites, but not my favorite icon. Looks like a 16px icon stretched
to the 32px size provided. The graphics are very clunky and squared; reminds me of
Commodore 64’s for some reason. On the other hand, it’s a perfect symbol
for a site that tracks where your money goes! A transparent background might have
worked better than the grey one used.
sizes: 32
liveperson.com
Good icon for a company that provides live customer service, representing the
conversation you have with their people. The icon file itself, though, is broken.
The 24px version is just broken and the 48px just provides the same, small 16px graphic
with a larger background.
sizes: 16, 24, 48
indesain.net
Nice icon that uses the color of the masthead and a subtle 3D effect. If size matters,
this favicon wins. This is the only icon I've seen that has a 128px version provided;
and it doesn't provide a 16px version at all.
sizes: 32, 48, 128
lazylaces.com
The author admits this is a pretty simple icon, but I think it has some nice touches
for a home–did icon. The yellow letters stand out well, match the color used in
the site logo and are very legible. Hanging the letters around the corner is also
interesting.
sizes: 16
royaltyfreeart.com
Wow. This is an awful,low budget icon— and for a site that sells art?!?! The
red on blue reduces contrast and makes it hard to read.
sizes: 16
urban75.org
Interesting translation of the site name into “U75”. Icon is bright and
stands out well, but doesn’t fit in with anything else on the site. A 32px
version is included but corrupted/blank.
sizes: 16, 
itomic.com
A simplified version of the dingbat from the company logo; keeps the color and concept
intact while making it something that looks good in 16px.
sizes: 16
yasmeen-ghauri.com
Well, I guess when you have a site about an individual person, using their face for the
favicon just makes sense. Reasonable likeness (for those that follow her, I’m sure
it’s very recognizable) even at 16px. Cropping the picture in close to the
face really helps. For a site like this, they really should have provided additional
icon sizes, at least a 32px version.
sizes: 16
tanagrampartners.com
These guys really like things small. The image for the favicon looks to be the same
exact size as the dingbat used in the company logo. Overuse of small fonts throughout
the site, but that’s for another discussion… Nice little dingbat and nice
use of colors, although they look much better on the dark background of the site than it
does on the white background of the favicon.
sizes: 16
mirashade.net
Curious that they chose the first letter from the company name rather than the logo
for their favicon. But, it looks good and ties to the company name well. Reminds me
of Cameron Moll’s favicon.
sizes: 16
skks.cz
I think this is supposed to be the archway logo used on the site. Using white to
form the image, however, doesn’t work for me in this example. Looks to me like a
green object sticking up in the air rather than the shadow of a doorway. But that’s
just me. Color matches the site nicely. File is saved as .ico, but it’ really
a .gif.
sizes: 16
howieday.com
Nice icon that uses the person’s initials. Doesn’t really fit the black &
grey color scheme used on the site, but it’s close. Icon file was saved as a
.ico file, but it’s physically a .gif. Strange that it works.
sizes: 16
rapha.cc
Same background color as the sight and same fancy font as the company name, using
just the first letter for the favicon. Too bad the splash of pink from the site
didn’t make it into the icon somehow.
sizes: 16
lookatlao.com
Hilarious. Love this pseudo-portrait icon that shows just the top of his head. Doesn’t
really match the rest of the site, other than the sense of humor, and it doesn’t need to.
sizes: 16
juicedthoughts.com
Another great icon. This one brings the orange juice theme used throughout the site
design and takes the glass of OJ from the logo for the icon! Very cool. Also very nice
that the icon uses a transparent background around the glass. There are 3px of wasted
vertical space, though, wish they had used it all so the glass would be a little bit
larger & easier to see.
sizes: 16
mandarindesign.com
I understand from a person responsible for the site that this icon has been around since 1999, when IE5
was brand new and the first browser to support favicons. At the time, there weren’t tools to generate an icon
from the site’s logo. I like the strength of the logo and the orange graphic element on the site header and
I really like the idea of using the swoop with the first letter as the icon. I just wish that the letter was
thicker and/or used the font from the logo; it loses some of its strength in the translation. It’s still
a cool, eye–catching icon.
sizes: 16
weeklystandards.com
Really nice adaptation of the image in the logo. Not an exact copy, an adaptation. Picks
up the theme of different color squares and enhances the site color scheme. Simple yet
very effective.
sizes: 16
p22.com
Faithful replication of the site logo, even keeping the horizontal layout by keeping
the orange color limited in height. Unfortunately, the larger icon sizes don't take
advantage of the increased size; the 32px and 48px icons still just contain 16px images.
sizes: 16, 32, 48
linksys.com
Nice representation of the graphic element of Linksys’ logo. Odd thing is that you
have to go digging around on the site to even see it anywhere. Not sure, but I think
it’s supposed to represent links in a chain. Nice and clean and I like the grey
on blue colors.
sizes: 16
pepsi.com
The classic Pepsi logo mini-sized. They really took advantage of creating the icon in
32px size and letting the browser shrink the image. Nice graphic details including a clean
white stripe and 3D shadow effect.
sizes: 32
redhatwine.com
Really interesting monochrome icon that only shows the shadowed areas with color and
leaves the highlights white. Without context, though, it can be hard to tell that the
image is actually a red hat.
sizes: 16
jeffcroft.com
The letter “o” Jeff’s logo. It’s the only letter that is altered from the
logo font, so it stands out quite a bit. Perfect for an icon. The colors don’t quite
match the color scheme of the site (icon uses red where the site emphasizes orange). A
transparent background would have been nice for this one.
sizes: 16
veen.com
Cool little graphic whose negative space forms the letter “v”. The grahpic isn’t really
repeated anywhere on the site, but it does reflect the overall color scheme. The multiple sizes are nice
and the colors are adjusted nicely down to a 16 color version.
sizes: 16, 32
joelonsoftware.com
With a site name that emphasizes the person, I guess you have to use a portrait icon. Whatever was used
to reduce the picture down to 16px left it a little too grainy & blurry. Very interesting that the 16
color version changes to black & white; a nice touch.
sizes: 16
jogin.com
Nice graphic of the first letter of the site name, using the same font as the site header. I like the rounded
corners and the border is a nice touch. Looking at the site, though, I wish he had brought some of
the oranges/reds used in the site design into the icon. But maybe that would be too much…
sizes: 16, 32
united.com
Standard United logo, but the simple, white–on–blue version instead of the colored version. I like
the graphic running off of the right edge, but that’s a pretty standard thing for United to do.
sizes: 16
lufthansa.com
Lufthansa’s flying bird logo. I think it’s too small and detailed for the shadow effect. Lufthansa
also has a great color scheme of yellow on grey…where’s the grey? They should ditch the
shadow and replace it with a grey background.
sizes: 16
kottke.org
The background color is enough to make you think of kottke’s site. Throw in a nice dark “k”
and you’re done! Great icon.
sizes: 16
saila.com
I can see where the icon comes from, but I think there’s just too much going on in such a small space.
Worn look, ragged edge and some background color thrown in. Definitely ties to the header graphic on the site,
but might be better if it were simplified a bit.
sizes: 16
mikeindustries.com
Keepin’ it simple; single letter and a clean font (same as the name in the header?). The site has
such a strong background color, kind of wish that had been used in the icon.
sizes: 16
molly.com
Same two–tone graphic used in the site logo, but just the first letter for the icon. Works out great.
Looks like the colors changed slightly when reduced to 16 color format; maybe should have used a 256 color icon.
sizes: 32
nundroo.com
The icon uses the lion graphic from the site logo, almost too complex of an image to work at the small size.
The site has such a rich blue and grey color scheme, I wish those colors had been used for the icon.
sizes: 16
tbray.org
This icon is a portion of the background image used in the masthead; very distinctive. With such a strong shape
and color, a transparent background would have worked much better. The white background detracts from the strength
at times.
sizes: 16
philringnalda.com
Without the site’s tag line, “a digital magpie”, I wouldn’t have had any idea what
this icon was. Now that I know it’s a bird, I can make it out. Overall, the picture is too small to be
recognizable. Nice use of a transparent background.
sizes: 16
simon.incutio.com, simonwilison.com
I’m not sure where this icon comes from, but it’s simple and easy to recognize. Maybe using
the site’s colors instead of white/grey/black would have hooked it to the site design more. Gotta just
love anyone that puts Beaker on their site, though…he was always my favorite.
sizes: 16
etherfarm.com
Same graphic used to separate the blog entries is used for the icon. Simple shapes and colors always work.
The icon is actually a GIF saved as favicon.ico.
sizes: 16
jasonsantamaria.com
Really nice icon that utilizes a symbol from the masthead and applies colors from the site’s scheme. Another
GIF saved as favicon.ico.
sizes: 16
sidesh0w.com
Is this PhotoMatt’s alter ego? Or just some spooky coinsidence? Oh, wait, the glasses are a
different shape, it must be someone else! :-) Actually, I really like this icon. Vey nice cartoon feel and
I like the way it zeros in on the face. Would have been really cool to have a 32px version that showed more
of the face or more detail.
sizes: 16
shauninman.com
This is a great icon. At first I thought it was a stick figure, with the dot being the head. Then, when I saw
the full site logo, I realized that it’s the person’s initials, “si”. I really like the
way the full logo, which is a full circle, is clipped to fit the 16px size.
sizes: 16Please share any thoughts you have about this page, how it’s constructed, my comments or the favicons themeselves. I’ll do my best to incorporate any and all constructive feedback. Please keep in mind that these comments are just mine and the original intent of this page was to be personal in nature. I’m definitely not a graphic designer and I wouldn’t consider my opinion to be terribly well informed other than I’ve looked closely at hundreds of these things. I’m just trying to understand what works well and what doesn’t.
© 2005 Michael P. Pierce. The creators of each favicon retain all rights and copyrights for their work.