Créer un logo : symbole, texte, icônes

Parce que c’est exactement là qu’un logo échoue. À l’écran on le compose en grand, mais il travaille en petit : 16 pixels dans un onglet, une icône sur un téléphone, un cercle d’avatar, une impression sur une boîte. Un symbole aux traits fins avec une signature de cinq mots devient une tache grise à ces tailles, et mieux vaut l’apprendre maintenant qu’après le tirage. Dans la même rangée figurent la version une encre et la simulation du daltonisme : le contraste peut être correct alors que du rouge sur du vert se confond quand même pour un homme sur douze.

Oui, et c’est la réponse à « j’ai déjà un symbole ». Un fichier SVG est décomposé en courbes et devient un symbole au même titre que les nôtres : monochrome, il se recolore avec le logo ; polychrome, il conserve ses couleurs. Une image ordinaire — PNG, JPG, WebP, un scan fait à la main — est suivie le long de son contour et transformée en vecteur : elle se met ensuite à l’échelle sans perte, prend la couleur de la palette et part dans le SVG en courbes, pas en points. La finesse se règle par un curseur, et si le dessin est clair sur fond sombre, le bouton « Inverser » aide. Quand la vectorisation ne fonctionne pas — pour une photo, par exemple — l’image est placée telle quelle et c’est dit explicitement sous l’aperçu : sinon la promesse d’un « vrai vecteur » serait fausse.

Il est réellement vectoriel et autonome. Une substitution courante est une image PNG enveloppée dans un fichier SVG : elle s’ouvre, mais se brouille à l’agrandissement. La deuxième est un texte en balise text : sur votre ordinateur il paraît correct, mais chez l’imprimeur ou le graphiste une police système prend le relais et le logo change de formes en silence. Ici les lettres sont converties en courbes : le fichier ne dépend de rien et se retouche dans n’importe quel éditeur vectoriel. À savoir aussi : plusieurs générateurs connus n’ont pas de vecteur du tout — Adobe Express n’exporte de SVG sur aucun forfait, et Squarespace comme le générateur de Shopify ne donnent que du PNG.

Ce sont quatre façons différentes d’échouer, chacune saisie par son propre nombre. « Contraste » est le rapport de luminance entre le symbole et le fond selon la formule WCAG : plus il est élevé, plus le logo se voit ; sous trois l’indication s’allume en avertissement, car un symbole gris clair sur blanc est joli en maquette et disparaît sur une carte de visite. « Daltonisme » est le même contraste calculé après simulation du trouble de la vision des couleurs le plus fréquent : du rouge sur du vert peut donner un premier nombre convenable et se confondre dans le second. « Sur sombre » mesure le symbole face à une interface sombre — c’est là qu’un texte presque noir disparaît. « À 16 px » avertit qu’une signature ne sera pas lisible à cette taille : sa place est sur la grande version, pas dans un favicon.

Favicon 16, 32 et 48 pixels pour l’onglet du navigateur, un favicon.ico assemblé à partir d’eux pour les anciens navigateurs et les raccourcis Windows, apple-touch-icon 180 pour l’écran d’accueil de l’iPhone, icônes 192 et 512 pour le manifeste, une icône masquable 512 avec marge (le système la recadre lui-même à la forme des icônes sur Android), favicon.svg, un site.webmanifest prêt à l’emploi et un fichier head.html contenant les lignes de liaison. Les fichiers se placent à la racine du site et les lignes de head.html dans la section head de la page. La transparence est volontairement retirée de l’apple-touch-icon et de l’icône masquable : iOS pose une icône transparente sur du noir, et les coins ressortent noirs.

Les symboles ont été dessinés pour cet outil, et non pris dans une bibliothèque d’icônes publique. La différence ne tient pas qu’à la ressemblance. Le générateur de Squarespace puise ses symboles dans une bibliothèque tierce, et sa propre aide écrit qu’il faut lire la licence de l’icône concernée avant de publier le logo ; une partie des éléments intégrés d’Adobe Express relève d’une licence qui interdit explicitement de les exporter en fichier autonome — or un logo est précisément un fichier autonome. Avec nos symboles, ce paragraphe n’existe pas. Les formes sont ici volontairement simples et géométriques : ce sont celles qui se lisent à 16 pixels, ce qu’aucune icône détaillée ne fait. S’il vous faut encore plus personnel — importez un dessin ou prenez un monogramme d’initiales.

Oui. Si la police décorative choisie ne contient pas les caractères voulus — Bebas Neue, par exemple, n’a ni cyrillique ni hangûl —, le texte est composé dans une police qui les possède, et la ligne sous l’aperçu indique laquelle. Substituer une police en silence serait pire : vous verriez un logo qui n’est pas le vôtre sans le savoir. L’arabe est composé avec le bon sens de lecture et la bonne liaison des lettres.