Logos vs icons: how to create and use them

Many software publishers don't really distinguish between their logo and its icon. Yet these two designs serve very different purposes and obey very different design rules. Icons, in the sense of representing a computer concept, have only really been used systematically since 2005-2010, when their role was relatively anecdotal. In this graphic design tutorial, we'll look at how the difference between these two graphic representations can be used to create relevant communication tools.

See all software Graphic Design

The logo

The logo is designed to represent a company or organisation. It conveys the company's public image through its colours, shapes and sometimes its baseline, which clarifies the message. This message is very closely controlled by companies, as it impacts on their very activity. The logo therefore has an important strategic dimension. Finally, most graphic designs are derived from the logo: graphic charter, icon, document templates or corporate website design, for example.

Technical constraints on logo design

The design of a logo must follow certain rules to ensure that it is timeless, versatile, simple and professional. Here are the main rules to follow:
Dimensions: a logo has no standard dimensions. They are often used from a minimum of 128px up to very large sizes (printed on kakemonos, for example).

• Shape: logos are horizontal 80% of the time, but there is no standard shape. They can be vertical or square. The horizontal format has graphic advantages and makes it easy to place a baseline.
• Borders: borders should be avoided so as not to alter the message.
• Baseline: you have the option of affixing a message in a maximum of 5 words so that anyone can immediately grasp what you do.
• Compression: the quality of the logo takes precedence over its compression. The original logo should therefore be vectorised using Photoshop or Illustrator for example, then exported in high quality JPG or PNG format.
• Backgrounds: the logo should be published on opaque backgrounds to guarantee the integrity of the message. Most of the time the background is white.
• Colours: a timeless logo should be built around a maximum of 3 harmoniously chosen colours.
• Font: if you must use a font, it must be free of copyright. Use the following sites to choose a quality font that meets your legal requirements:
  • Font Squirrel : free fonts for commercial use
  • DaFont: the reference for free fonts for personal and commercial use
  • 1001 Free Fonts : free fonts
  • FontPark: free fonts

When to use a logo

Logos are mainly used in the following situations:

• Corporate website
• Headers and footers of official documents
• Email signatures
• All printed materials or PDFs

Icons

An icon is a graphic representation of a service. It is usually found in an environment that you do not control graphically. It may be a browser tab whose colour or size does not change. It can also be a marketplace, a comparator, a YouTube channel or a mobile phone. In all cases, it is the designer of the environment who decides on the user experience. This experience is maximised when the icons of all software solutions (SaaS, services, applications) are standardised, hence the importance of icons.
The massive use of icons corresponds to the efforts made by operating system designers and marketplaces to offer a unified environment. The hyper-competition between solutions is also encouraging publishers to simplify their communication codes to the extreme in order to be more eye-catching.
The icon also makes it possible to leave aside the message conveyed by the brand. Its presence on a visual indicates that it's about you, while leaving room for a more targeted message. This is why it can be used on an advertising banner to prioritise messages.

Technical constraints

Icons are designed with greater constraints than logos:

• Size: between 16px and 256px: 256x256, 128x128, 64x64, 32x32, 24,24,16x16
• Shape: square is standard
• Borders: borders are an option. However, it is preferable to let the environment (browser, marketplace, etc.) decide how the icon is delimited.
• Baseline: none. An icon does not contain any text.
• Compression: the size should be reduced as much as possible. Remember to use Photoshop's File > Save for Web function, which generates good quality files with a high level of compression. If you don't have Photoshop, use an image optimiser such as ImageOptim (MAC) or RIOT (PC).
• Background: leave the background transparent. You can opt for the PNG format, which offers perfect gradients, or the GIF format, which has fewer colours but produces very light files.
• Colours: icons can be more imaginative than logos, but simplicity is essential.

Icon use cases

See all software Graphic Design

• The Favicon. This is the icon available in the browser tab. There are several sites where you can design one:
  • Logaster
  • FaviconGenerator
• Marketplace, comparator. In this case, a large icon is required to optimise visual quality: 256px x 256px for example.
• Mobile phone: application icon
• Computer desktop: MAC, Windows or Linux application launcher

Here are some other icon-related tools you might find useful:

• Iconfinder: free and paid icon search engine
• IM Creator : icon creation
• Fontello: icon font generator.
• Flat Icon: vector icon search engine.
• Material Design Icons: 750 free and open-source glyphs from Google.
• Font Awesome: iconic toolbox for fonts and CSS.
• Glyphsearch: icon meta-engine.
• MakeAppIcon: generates Application Icons of all sizes in one click.
• Endless Icons: a collection of free flat icons and other creative elements.
• Ico Moon: this icon generator contains over 4,000 vector icons.
• The Noun Project: offers thousands of glyph icons from a range of artists.
• Perfect Icons: social icon creation tool.
• Doodle Set, Flat Set, Vector Line Set : free icons
• Icon Sweets: 60 free vector icons for Photoshop.

Please feel free to share and comment on this article if it has helped you or if you would like to add to it. Happy creating!