How To Use Icons On Your Web Site
Icons have been used in design since, well, since design began. From the hieroglyphics on the pyramids of ancient Egypt to the orange RSS icon now gracing so many web sites, icons have been used in both print and in web design for the same purpose — to draw the eye quickly to important parts of the document or web page.
Practical Use
Icons sum up and convey lots of information quickly, and you can use them on your site to grab your visitor’s attention, rapidly communicate an idea, or highlight a section of your site.
Let’s take a look at some random sites and how they use icons to communicate, make navigation easier, or just make the page look pretty!
Some examples of the use of icons include:
1. Add visual interest to navigation.
The digital artifex site uses icons in association with some text for a mid-page navigation setup .
2. Draw attention to specific parts of a page, such as special offers.
On the My Starbucks Idea homepage, the icons draw the user’s eyes to what might otherwise be a fairly cluttered page with a lot of text.
3. Draw the eye to services that you provide.
Sitemaker uses icons to communicate using well understood images — for example, a pie chart icon to illustrate increasing sales.
4. Add extra “oomph” to headings.
The Ripple site is currently in beta but the homepage consists almost entirely of the four icons. It’s very simple and engaging.
As well as providing a very practical function, you can also use icons for aesthetically pleasing purposes too. On some web pages you’ll find that the icons used are an extension of the company branding, while on others there is sometimes a sense that they icons are there for no other reason than to look pretty. If you are using icons to add a little extra “oomph” to your site, remember that for most of your visitors, the icons should have some sort of meaning or association so make sure that your choice of icons does not confuse your users.
Evolution of the Web Icon
Old-school icons such as a little house representing “home” and the outline of an envelope representing “email” have now been replaced with miniature works of art.
(Yes this is actually an icon!)
If you like a challenge, you can make your own icons in an image editor such as Photoshop or Paint Shop Pro. Otherwise, there are some incredibly beautiful icons available to download for free, such as the Silk icon set or those available at IconPot. A quick search on Google will astound you with what’s available.
A New Icon
I think it’s important to mention a new kind of icon that has evolved in recent times entirely for use on web sites — the favicon. As you’re no doubt aware, the favicon is that little picture that appears on the URL address bar of your browser, and also on the tabs of some browsers.
The favicon is now part and parcel of every web design, and should be included as part of your overall branding. Alyssa recently covered an amazing list of 88 outstanding examples.
What do you think makes a good icon? Do you use icons on your sites? If not, why not?
Related Reading:
