Pourquoi partir d’un logo vectoriel ?

Chaque fichier d’une marque, de l’icône d’onglet de 16 px à l’image de 1 024 px pour la boutique d’applications, devrait provenir d’une seule source. Si cette source est un PNG, chaque export est un redimensionnement de pixels : les petites tailles deviennent floues et les grandes restent molles. Si c’est un SVG fait de tracés, chaque taille est redessinée de zéro. Les étapes ci-dessous gardent un seul SVG au centre et en tirent tout le reste.

Le logo hibou Study en SVG, puis le même hibou en icône d’app iOS aux coins arrondis, en icône adaptative Android dans un cercle, et en favicon de 32 px agrandi pour montrer ses pixels

L’un de nos logos d’exemple, puis l’icône iOS, l’icône adaptative Android et le favicon que nos outils d’export ont créés à partir de son SVG. Le favicon est agrandi ; à 32 px, chaque pixel compte.

Étape 1 : décrire le logo et choisir une idée

Ouvrez le générateur de logo IA et écrivez ce que le logo doit représenter : « un hibou fait de cercles et de triangles, pour une appli de révisions, indigo et ambre ». Ajoutez le nom de la marque si le logo doit l’écrire. Choisissez une puce de style si vous savez quel type de logo vous voulez ; le guide des styles de logo les explique un par un. Chaque envoi crée quatre idées, et son prix est indiqué sur le bouton avant.

Étape 2 : affiner une idée en mots

Choisissez l’idée la plus proche de ce que vous voulez et dites ce qu’il faut changer : « R plus épais », « moins de plumes », « placer le soleil au-dessus du sommet ». Un affinage garde le reste du logo. Préférez une ou deux modifications précises par affinage plutôt qu’une liste de dix.

Étape 3 : le vectoriser

Choisissez Vectoriser sur le logo retenu. Il est vectorisé en SVG, chaque couleur dans ses propres tracés, et vous pouvez le comparer à l’original avant de l’utiliser. Ouvrez-le dans l’éditeur SVG pour recolorer une partie, supprimer une forme isolée ou modifier l’espacement du nom.

Vérifiez trois choses avant de continuer. En petite taille, le logo reste-t-il lisible ? Des formes ou des lettres se touchent-elles alors qu’elles ne devraient pas ? Les couleurs sont-elles exactement celles que vous voulez ? Les corriger maintenant dans le SVG corrige tous les fichiers qui en découleront.

Étape 4 : créer les icônes d’app

Le générateur d’icônes d’app crée, à partir du SVG :

  • Android : des PNG par densité de 48 à 192 px, une image de 512 px pour le Play Store, et le XML d’une icône adaptative avec un premier plan dans la zone de sécurité et un calque monochrome pour les icônes à thème ;
  • iOS : un AppIcon.appiconset avec une image opaque de 1 024 px pour Xcode.

Choisissez une couleur de fond et la marge autour du logo. Un logo entouré d’espace transparent donne à l’icône monochrome d’Android sa vraie forme. Des icônes d’app Android et iOS à partir d’une seule image détaille les étapes d’import et ce qu’il faut vérifier sur un appareil.

Étape 5 : créer le favicon et les icônes PWA

Le générateur de favicon crée favicon.ico (16, 32 et 48 px dans un seul fichier), un favicon.svg quand le visuel est fait de tracés vectoriels propres, des PNG de 16 et 32 px, une icône Apple touch de 180 px, des icônes de 192 et 512 px avec leurs versions maskable, un site.webmanifest, et le HTML à coller dans le <head> de votre page. Lesquels les navigateurs utilisent, et pourquoi un favicon a encore besoin d’un ICO, c’est expliqué dans favicons SVG, PNG ou ICO ; la zone de sécurité maskable, dans les icônes PWA maskable.

Ou tout d’un coup : le kit de marque

Le kit de marque lance les mêmes exports sur le même SVG avec un seul jeu de réglages de marque (nom, nom court, couleur de thème, couleur de fond et marge) et réunit les résultats dans un seul ZIP :

Dossier Contenu
favicon/ le pack favicon et PWA
app-icons/ les jeux d’icônes d’app Android et iOS
ios/ un image set Xcode pour utiliser le logo dans l’app
android/ un VectorDrawable pour utiliser le logo dans l’app
png/ des PNG transparents, plus grand côté de 256, 512, 1 024 et 2 048 px
svg/ le SVG optimisé et l’original en pleine précision

Chaque dossier contient exactement ce que l’outil correspondant crée à partir de la même source : vous pouvez donc commencer par le kit et régénérer plus tard une partie seule. Le prix du kit est affiché avant le téléchargement.

Avant le lancement

Recherchez votre nom et les marques similaires dans le registre des marques de chaque pays où vous vendez. Un logo généré est nouveau, mais rien ne le compare aux marques déposées. Gardez le SVG comme fichier maître, et créez les nouvelles tailles à partir de lui, jamais à partir d’un PNG.