When viewing a website, most users will first scan the page for visually interesting content. Most users will begin reading only after something grabs their attention. Icons are simple, effective way to draw users into the content of your website.
In this article, we will look at the benefits of using icons as well as the different ways to use icons on your website.
Icons were first developed in the 1970s by the Xerox Alto as a means of making computers easier for beginners to use – it is used to communicate meaning in the simplest, most user-friendly way.
On a web page, an icon is a graphical image that represents a topic or information.
When was the last time you read through a plain text article on the Internet? (an example of a plain text article is a website’s Privacy Policy).
Icons add and enhance the visual and aesthetic appeal on your web page. Icons are relatively small so they add just enough of visual appeal to draw attention to your web page without taking the attention from your main/core message.
In addition, icons can act as page breakers, visually breaking up your content, making it more accessible, less intimidating and easier to read.
Icons are easy to recognize and easy to understand because of their familiarity, universality and convention usage. Because of the familiarity and universality, icons allow the user to quickly browse through a web page and get a better idea of the content, even if it’s in a different language.
For example, some icons you can easily recognize, a shopping cart for an online shopping cart, a magnifying glass for “search” and an envelop for “email” or “contact.”
Take a look at this example. Just by looking at the icons, can you guess what is the text content?
The actual WordPress web page is here. You’re probably not that far off because the icons are recognizable and easy to understand.
Now, take a look at this example.
Unless you can read Russian, you won’t be able to understand the text on this menu. But, because it uses some standard icons, you might be able to make educated guesses. For example, you could easily recognize the icons for news, messages and calendar.
Have you noticed the icon for Photoshop, Illustrator, Flash, Dreamweaver and Lightroom have very similar icon styles? They are all products of Adobe.
By using the same icon style, users can easily link all these products into a product family or suite. In addition to creating a unified look, they help build a strong brand recognition.
The rule of thumb is, icons should be used to draw attention to your content, and not to diminish or replace it.
The most common way to use icons on a website is in lists. Lists are a practical way to highlight your content: products, services, features, etc. But lists are inherently bland and boring. Using icons in your lists can make them more accessible and engaging.
Take a look at the Features list from WordPress and from Joomla, which one looks easier to read?
You can also use icons to represent frequently accessed items.
Take a look at Gap.com. When you arrive at the website, immediately you will see three icons: Favorites, Shopping Cart and Search. These are the most common used, as well as most frequently accessed icons on ecommerce websites.
The use of icons allows the website visitor to easily scan and locate what they want.
Some would argue that it’s the other way around, that some icons need a text label alongside to overcome any ambiguities of the icon.
Let’s take a look at the icons used on Twitter’s website:
Or the icons on Google Play’s website:
In both cases, a simple text label would suffice. In fact, in these cases, the icons cannot replace the text – because the meaning of the icons are not 100% clear to everyone.
But we can’t deny the fact that the icons do make the look of a text label more pleasing.
Icons take up less space, and because our devices and screens are getting smaller and smaller, designers might choose to use icons rather than text.
If you use Google’s email service, login to your Gmail account click on any email message and take a look at the action bar:
Icons are smaller than text-labels and the uniform size can make the fit easier and cleaner in the available space.
Icons can be used to provide a visual separation between different sections of text.
Example: Midori’s website:
There are many websites where you can find quality icons and icon sets, both free and paid.
Icons are used to enhance your content and design, so it’s important to pay attention to how your icons match the rest of your website.
When you open a website on your browser, you will see the small images on the window tabs:
These little images are called favicons. Favicons also appear in the list of bookmarked URLs in your browser.
Favicons are also known as site icons. It is the small image that is associated with a particular website. In other words, it’s an icon for the website.
While it is not essential to have a favicon on a website, having one could improve the overall quality of your website.
Take a look at the following example. Say you are planning your next vacation and you need to buy flight tickets online.
You opened up your browser, typed in ”cheap flights and hotels” and you found these travel websites. Which website are you most likely to buy from?
It is very common for users to judge online retailers based on how professionally built the site is. When you don’t have a favicon, the browser will display the default blank document icon. It certainly doesn’t look professional, especially when being shown alongside competitors who have a favicon.
Creating a favicon is easy. You can use almost any image editing program, including Photoshop, GIMP, etc.
The size for your favicon should be 16x16 pixels or 32x32 pixels. If you don’t want to create a tiny image, you can certainly resize an existing photo. But keep in mind, when you resize a larger image to be this small, you might end up losing a lot of details on the image.
Once you’re happy with your favicon, you will need to save it in an .ICO extension.
Facebook and Twitter icons are called social media icons. Social media icons are some of the most commonly used icons on websites, especially blogs. Other social media icons include Pinterest, Google+, Instagram, LinkedIn, YouTube and more.
You can always download social media icons from their respective office websites.
Many website builders come with built-in social media icons that you can use and customize for your website.
The major benefit of using the built-in social media icons is that the icons are ready-to-go. You don’t need to copy and paste any codes – all you need is select the icons you want to display and enter in your user ID or profile name on the respective social media sites. Your website builder will then link the icon to your social media profile(s).
Note: In addition to the built-in social media icons, Wix also offers many 3rd party social icon apps, both free and premium in their App Market.
If you are using the self-hosted WordPress platform (ie. installing WordPress on your website), you can easily find numerous social media widgets and plug-ins that you can install on your WordPress website. Like the built-in social media icons in website builders, these plug-ins allow you to easily integrate social media functionality on your website.
When deciding where to place your social media icons, the best advice is to pick a prominent position. The more visible the button is, the more people will click on it to share your content.