sparkles
search
Référencer un logiciel
sparkles

Logos vs icônes : comment les créer et les utiliser

Par Fabien Paupier

Mis à jour le 31 juillet 2019, publié initialement le 5 janvier 2016

Beaucoup d’éditeurs de logiciels ne font pas vraiment la distinction entre leur logo et sa déclinaison en icône. Ces deux designs ont pourtant des finalités bien différentes et obéissent à des règles de conception distinctes. Les icônes, au sens de la représentation d’un concept informatique, sont vraiment utilisées de manière systématique que depuis les années 2005-2010 alors que leur rôle était relativement anecdotique auparavant. Nous allons voir dans ce tutoriel en création graphique comment la différence entre ces deux représentations graphiques peut créer des axes de communication pertinents.

Le logo

Le logo est conçu pour représenter une entreprise ou une organisation. Il véhicule l’image publique de la société grâce à ses couleurs, ses formes, et parfois sa baseline qui clarifie le message. Ce message est d’ailleurs très contrôlé par les entreprises car il impacte l’activité même de celles-ci. Le logo a donc une dimension stratégique importante. Enfin, la plupart des conceptions graphiques découlent du logo : charte graphique, icône, modèles de documents, ou design du site Web corporate par exemple.

La conception d’un logo doit se faire selon certaines règles pour qu’il puisse être intemporel, polyvalent, simple, et professionnel. Voici les principales règles à suivre :
Dimensions : un logo n’a pas de dimension standard. Il est souvent utilisé à partir de 128px minimum jusqu’à de très grandes tailles (impressions sur kakemonos par exemple).

  • Forme : les logos ont une forme horizontale 80% du temps mais il n’y a pas de standard à ce sujet. Ils peuvent être verticaux ou carrés. Le format horizontal présente des avantages graphiques et permet de placer une baseline facilement.
  • Bordures : les bordures sont à proscrire pour ne pas altérer le message
  • Baseline : vous avez la possibilité d’apposer un message en 5 mots maximum permettant à n’importe qui de saisir immédiatement ce que vous faites.
  • Compression : la qualité du logo prime sur sa compression. Le logo original doit donc être vectorisé grâce à Photoshop ou Illustrator par exemple, puis exporté au format JPG haute qualité ou PNG.
  • Fonds  : le logo doit être publié sur des fonds opaques pour garantir l’intégrité du message. La plupart du temps le fond est blanc.
  • Couleurs : un logo intemporel doit être construit sur 3 couleurs maximum harmonieusement choisies.
  • Police : si vous devez utiliser une police, celle-ci doit être libre de droit. Utilisez les sites ci-après pour en choisir une de qualité qui correspond à vos contraintes légales :

Les logos s’utilisent principalement dans les cas suivants :

  • Site web corporate
  • Entête et pied de page des documents officiels
  • Signature des emails
  • Tous les supports imprimés ou PDF

L’icône

Une icône est une représentation graphique d’un service. Elle se retrouve la plupart du temps dans un environnement dont vous n’avez pas la maitrise graphique. Il peut s’agir de l’onglet du navigateur dont la couleur ou la taille ne change pas. Il peut également s’agir d’une place de marché (marketplace), d’un comparateur, d’une chaine youtube ou d’un téléphone mobile. Dans tous les cas c’est le concepteur de l’environnement qui décide de l’expérience utilisateur. Cette expérience est maximisée dès lors que les icônes de toutes les solutions logicielles (SaaS, services, applications) sont standardisées d’où l’intérêt des icônes.
L’utilisation massive des icônes correspond aux efforts menés par les concepteurs des systèmes d’exploitation et les marketplaces pour proposer un environnement unifié. L’hyper-concurrence entre solutions incite également les éditeurs à simplifier leurs codes de communication à l’extême pour être plus accrocheurs.
L’icône permet par ailleurs de laisser de côté le message véhiculé par la marque. Sa présence indique sur un visuel qu’il s’agit de vous, tout en laissant place à un message plus ciblé. C’est pour cela que nous pouvons l’utiliser sur une bannière publicitaire pour prioriser les messages.

Contraintes techniques

Les icônes sont conçues avec des contraintes plus fortes que les logos :

  • Dimension : la taille est comprise entre 16px et 256px : 256x256, 128x128, 64x64, 32x32, 24,24,16x16
  • Forme : le format carré est un standard
  • Bodures : la bordure est une option. Il est cependant préférable de laisser l’environnement (navigateur, place de marché, etc.) décider de la délimitation de l’icône
  • Baseline : aucune. Une icône ne contient pas de texte.
  • Compression : la taille doit être réduite à son maximum. Pensez à utiliser la fonction Fichier > Enregistrer pour le Web de Photoshop qui génère des fichiers de bonne qualité pour une compression importante. Si vous ne disposez pas de photoshop, utilisez un optimiseur d'image comme ImageOptim (MAC) ou RIOT (PC).
  • Fonds : laisser le fond transparent. Pour cela vous pouvez opter pour le format PNG qui offre des dégradés parfait ou le format GIF qui dispose de moins de couleurs mais qui produit des fichiers très légers.
  • Couleurs : les icônes peuvent avoir plus de fantaisie que les logos mais la simplicité est fondamentale.

Cas d’utilisation d’une icône

  • La Favicon. C’est l’icône disponible dans l’onglet du navigateur Web. Différents sites vous permettent d’en concevoir une :
  • Marketplace, comparateur. Dans ce cas une icône de grande taille est demandée pour optimiser la qualité visuelle : 256px x 256px par exemple.
  • Téléphone mobile : icône de l’application
  • Bureau d’ordinateur : lanceur d’application MAC, windows, ou linux

Voici égalements d’autres outils relatifs aux icônes qui peuvent vous servir :

  • Iconfinder : moteur de recherche d'icônes gratuites et payantes
  • IM Creator : création d’icône
  • Fontello : générateur de polices d’icônes.
  • Flat Icon : moteur de recherche d'icônes vectorielles.
  • Material Design Icons : 750 glyphes gratuits et open-source proposés par Google.
  • Font Awesome : boite à outils iconique pour les polices et le CSS.
  • Glyphsearch : meta-moteur d’icônes.
  • MakeAppIcon : génère des Icônes d’Applications de toutes les tailles en un clic.
  • Endless Icons : regroupe des icônes flat gratuites et d’autres éléments de création.
  • Ico Moon : ce générateur d’icônes regroupe plus de 4000 icônes vectorielles.
  • The Noun Project : vous propose des milliers d’icônes glyphes de plusieurs artistes.
  • Perfect Icons : outil social de création d’icônes.
  • Doodle Set, Flat Set, Vector Line Set : icônes gratuites
  • Icon Sweets : 60 icônes vectorielles gratuites pour Photoshop.

N’hésitez pas à partager et commenter cet article s’il vous a rendu service ou si vous souhaitez le compléter. Bonne création !