The Wardman Wire

This is the third article in my series about favicons, and how to use them on your blog. I have covered how to create a favicon, and how to add a favicon to a Blogger account.

This article looks at the features of a good favicon, and suggests how you can make sure that your favicon stands out from the crowd.

The previous articles in this series are:

1. Here’s a quick way to add a favicon to your site
2. How to Make Your Blog Stand out - add a Favicon to Blogger

Some example of icons for you to study

I have copied some “MyBlogLog” visitor panels into this article, and shown them at reducing sizes - so that you can easily see how some icons stand out from the crowd.

I have resized the three images, so that each icon is approximately:

• 96×96 pixels -the standard mybloglog size.
• 32×32 pixels - the larger “favicon” display size.
• 16×16 pixels - the smaller “favicon” display size.

Where do Favicons appear

Favicons appear in a few different places:

• On the tab of a tabbed web broswer.
• Next to the web address in the address bar.
• In the history of the web pages you have visited.

These favicons are sized at eiether 16×16 or 32×32 pixels - depending on the context.

What does a Favicon do

The jobs of a favicon are quite clear, but a reminder never goes amiss:

• A favicon should stand out from the crowd - for example so that your site is visible when there are a number of windows open in a tabbed browser.
• A favicon should in some way relate to your identity - it is an advert.
• A favicon should be clear - it should give a simple message.

Tags: political blogging, favicon, design a great favicon, publicise your blog, what is a favicon, great favicon, conservative party, labour party, liberal democrat party, libdem, ulster unionist party, Liberal Democrats, snp, ukip, green party, blogger off campaign, trades union congress, tuc 100 days to better blogging

[tags]political blogging, favicon, design a great favicon, publicise your blog, what is a favicon, great favicon, conservative party, labour party, liberal democrat party, libdem, ulster unionist party, Liberal Democrats, snp, ukip, green party, blogger off campaign, trades union congress, tuc 100 days to better blogging[/tags]

Principles of Design

I have identified a few basics principles that can help to make your favicon successful as a design. Sometimes, breaking one of these can be helpful - but they are good guidelines.

• Keep it simple. You are working with images as small as 16×16 pixels.
• Keep it clear.
• Keep it small in “memory footprint”. To make your site fast.
• It is more difficult to design an icon, the smaller it gets - so the 16×16 icon is the acid test of a good favicon.

What works?

• Clear shapes are effective.
• Use colour as well as shape.
• Letters can work quite well, especially if they are unusual or relate directly to who you are or what you are doing.
• Simple cartoons - especially line drawings - work well.

What doesn’t work?

Generally photos don’t work. When reduced in size they all look the same.

“Poons” over at Howling Spoons has an example of a photo favicon that works better - in this case because it is a half face shot, with a “distinctive” profile.

Have a careful look at the screenshots on the right, and see what you think.

What about the Wardman Wire favicon?

There are three screenshots below of my favicon in a MyBlogLog panel on another blog.

This icon is based on the silhouette from one of the birds on the telephone wire in my header image, with a blue background to show the sky. Therefore it is related to me blog itself.

The thing that stands out clearly among other icons is the blue background. In my case I been able to make successful larger versions using the same image. This is my bonus tip for using your favicon effectively to markey your website:

Find a design that works at all sizes.

Bonus Tip

When you are designing a favicon, think about other “identity” graphics:

• Larger icons- such as “Gravatars” (Globally Recognised AVATARS) that appear next to comments you make on certain blogs.
• Images that appear on “mybloglog” panels on blogs that you visit.
• The images that you use for “branding” on your own blog, and “plaques” that you supply to other websites to display with a link back.

In these situations, your image is competing with others for attention. Get it right, and you will receive visitors. Get it wrong, and your traffic will go elsewhere.

Differences when designing larger icons

• Larger images can take more detail, so you can rely more on subtle colours rather than simplicity and shape.
• You can use photos more easily, but - as you can see from the graphics in this post - the whole world uses photographs.
• The most important point - be different, but be yourself.

Take another look at political favicons

This is a copy of the list on my previous article. Have your thoughts changed after reading this article about favicon design? Join the conversation in the comments box.

These are the favicons for the main political parties.

Party (links are to blogs)	Icon	Filename
Conservatives		tory-favicon.ico
Labour		labour-favicon.ico
Liberal Democrats		libdem-favicon.ico
SNP		snp-favicon.ico
UKIP		ukip-favicon.ico
Green Party		green-party-favicon.ico
Plaid Cymru		plaid-cyrmu-favicon.ico
Ulster Unionist Party		uup-favicon.ico
Blogger Off Campaign Party		blogger-off-favicon.ico

Note that you will be limited in the use you can make of these by party rules.

Parties not in the list - DUP, SDLP - do not have favicons as far as I can tell. It is interesting to note that only the Lib Dems and the Ulster Unionists have used the feature of favicons that allows both 16×16 and 32×32 versions to be included in the same file.

Which favicons do you think work well? Please make comments below.