How big are your icons?

Updated: January 30, 2010

Icons? Software related? Have you perhaps filed an article in the wrong section, mate? Not at all. This article is all about social issues, not software.

What I want to talk to you about are icons linking to various social networks and sharing services, like Digg, Stumbleupon, Twitter, Facebook, and others. For many users, these networks and services are an excellent, efficient and a fast way of sharing information with friends and would be friends. For webmasters, making your content easily available to users of these networks and services boosts the chances of quick exposure leading to increased traffic and possibly revenue. Placing icons linking to popular micro blogs, social news sites and community networks is a smart thing to do.

On one hand, you will have made available tools that can help promote you. On the other hand, users visiting your website will believe you're in the know, since you so gallantly flaunt the slew of lovely, cute icons that point to world's bread and butter of social mingling. On the third hand, lazy users who would not bother bookmarking your website might do so now and become more frequent visitors. It's a win win situation, really.

No problem. So far, so good. Well, there's one problem. Sometimes, you come across sites where the icons are simple huge. Not just big. Humongous. We're talking icons that easily take 20-30% of screen real estate. While we have already established that having relevant icons present is good, making them Godzilla-size could be a sign of desperation or boy-scout zeal. There's such a thing as too much.

You need an example, here we go:

Example 1:

Typical RSS icon size is 16x16px or 32x32px, something like this, modest and elegant:


You may have a really good website, so you can try 64x64px:


If you think you're selling eternal life, you might, but only might get away with something like 100x100px:


It really becomes disturbing when you exceed the normalcy limit:


And now, you officially need some hardcore therapy:


This is probably national emergency, DEFCON -1:


Believe it or not, some website have these things ... What they're trying to accomplish, I have no idea, but it feels as they must have clicks or someone dies from the lack of attention, it's that serious. Not really sure if this works, but it definitely stalls my mouse cursor.

Example 2:

Twitter is another favorite. Not only does the blue birdie come in dozens of shapes, from hummingbird to bald-header eagle, it also comes in a staggering array of sizes, some almost as big as the actual bird.

First, there's the actual logo:


And here it is, big style:


But why not make it interesting, something with shadows and delicate image borders and whatnot:


Or even use custom designs that bespeak of moderately high emotional distress. Notice the slight blur and the soft erosion of the Twitter logo border, all of which add character to the out-of-proportion icon. Nothing like lack of focus and total screen domination to show you mean serious business!

Example 1

Example 2

Making the perfect article

Now, all you need is one big Twitter icon somewhere, one RSS icon, a few 300x300px StumbleUpon and Digg icons, and you already have a decent article that requires two or three scrolls on the middle mouse button, regardless of the actual text or quality. Great articles are all about flashy design.

So how big are your icons?

My personal experience shows that quality of website articles is inversely proportional to the area of all social networking and sharing services icons multiplied by their number. The damping factor of 0.707 can be used if your articles contain more than 1,000 words each and have at least two related images.

So, let's see what we have:

0px2: You're running a Linux kernel Bugzilla or a Majordomo mailing list.

1-2048px2: You are probably running a decent site, with accurate, useful data, articles worth reading, guides worth following, tutorials worth studying, and opinions worth noting. You take care about what you post, making sure to get the facts right. You are more concerned about making your users happy and safe in their journey across your pages than earning another click.

2049-16Kpx2: You are quite serious about what you write. Most of the time, you have actually followed your own advice. You want to be correct, but you're okay with a few mistakes here and there, as long as the majority of your users does not notice. Your goal is to become famous.

16K+1-64Kpx2: Your primary goal is making your Alexa rating as low as it can go. Your articles are one big teaser, lots of polish and style, but little or no content. You throw about big words, use shiny slogans and offer advice on things you've never really done or just tried once between breakfast and morning bus. Your users would probably be angry if they knew, only they are totally clueless.

64K+1-256Kpx2: If your website could be heard, it would be one Grand Canyon scream, with digitally amplified echo and klaxon built into the lining of your bladder. Content is just a means to an end. Most of the time, you dabble in politics and religions mixed with everything else just to make sure you get the right attention. You are probably as reliable as Mayans when it comes to predicting when the world is going to end. Your website is frequented mostly by people who believe monitor and computer is the same thing.

256K+1px2 and higher: There's nothing to be said. You'll sell your mother if it means one more click, one more ad, more one shiny buck in your pocket. Content is a forbidden word in your lexicon. You actually make Donald Trump blush. He wants to hire you, only you have no email link on your website. If you could, you would force everyone to write documents in Flash and only animated GIF images would be allowed for use. You're in for one big score, before the angry mob of villagers with torches and pitchforks comes, that is. Your website will last only for a few short months, maybe a year, but you don't care, because you'll have another spun up in the matter of minutes, milking a new generation of suckers soon.

Just for reference, 256,000px2 is just a single 505x505px image, so be careful!


There you go. Now, you know what you are and what your website represents. Hopefully, this article will help you adjust the size of icons of social networks and sharing services available on your website, so that you do not end up as a blogging outcast.

I hope you agree with my assessment. I mean, you should, after all, it's spot on.