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 have very different purposes and obey distinct design rules. Icons, in the sense of representing a computer concept, have only really been used systematically since the years 2005-2010, when their role was relatively anecdotal. In this graphic design tutorial, we'll see how the difference between these two graphic representations can be used to create relevant communication axes.

See all software Graphic Design

The logo

The logo is designed to represent a company or organization. It conveys the company's public image through its colors, shapes, and sometimes its baseline, which clarifies the message. This message is very much under the company's control, as it impacts on its 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 so that it can be 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 (e.g. kakemonos).

• Shape: logos are horizontal 80% of the time, but there is no standard shape. They can also be vertical or square. The horizontal format offers graphic advantages and makes it easy to place a baseline.
• Borders: borders should be avoided to avoid altering the message.
• Baseline: you have the option of affixing a message in a maximum of 5 words, allowing anyone to immediately grasp what you do.
• Compression: logo quality takes precedence over compression. The original logo should therefore be vectorized using Photoshop or Illustrator, for example, then exported in high-quality JPG or PNG format.
• Backgrounds: the logo must be published on opaque backgrounds to guarantee the integrity of the message. Most of the time, the background is white.
• Colors: a timeless logo should be built around a maximum of 3 harmoniously chosen colors.
• 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 or PDF materials

Icons

An icon is a graphic representation of a service. It is most often found in an environment over which you have no graphic control. It may be a browser tab whose color or size does not change. It can also be a marketplace, a comparison site, a YouTube channel or a cell phone. In all cases, it's the designer of the environment who decides on the user experience. This experience is maximized when the icons of all software solutions (SaaS, services, applications) are standardized, 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 also encourages 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. That's why we can use it on a banner ad to prioritize messages.

Technical constraints

Icons are designed with more stringent constraints than logos:

• Size: between 16px and 256px: 256x256, 128x128, 64x64, 32x32, 24,24,16x16
• Shape: square format is standard
• Borders: borders are optional. However, it's best to let the environment (browser, marketplace, etc.) decide how the icon is delimited.
• Baseline: none. An icon contains no 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 at high compression. If you don't have Photoshop, use an image optimizer such as ImageOptim (MAC) or RIOT (PC).
• Background: leave the background transparent. You can opt for PNG format, which offers perfect gradients, or GIF format, which has fewer colors but produces very light files.
• Colors: icons can be more imaginative than logos, but simplicity is essential.

Icon use cases

See all software Graphic Design

• 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 optimize visual quality: 256px x 256px for example.
• Cell phone: application icon
• Computer desktop: MAC, Windows or Linux application launcher

Here are a few 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 any size with a single click.
• Endless Icons: a collection of free flat icons and other design elements.
• Ico Moon: this icon generator features over 4,000 vector icons.
• The Noun Project: offers thousands of glyph icons by various 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 you find it useful or would like to add to it. Happy creating!