Qu'est-ce que Créateur de Badges et Boutons ?

Le Créateur de Badges et Boutons génère des badges et écussons personnalisés avec le texte, les couleurs et les formes de votre choix. Définissez un libellé et une valeur, choisissez un style et téléchargez en PNG ou SVG.

Produit des badges au style shields.io (une pastille colorée séparée en un libellé gris et une valeur colorée) rendus en SVG en ligne. Choisissez parmi les formes flat, flat-square, rounded, pill ou for-the-badge ; réglez les couleurs hex pour chaque moitié et une couleur de texte distincte pour le libellé et la valeur ; intégrez un logo de technologie (GitHub, npm, Docker, Python, Node.js, etc.) et laissez sa couleur de marque s'appliquer automatiquement ; encadrez le badge dans une URL cliquable ; copiez le résultat en Markdown pour un README, en HTML pour un e-mail ou une page web, ou téléchargez-le en SVG net ou en PNG à 3x. Ajoutez plusieurs badges à une liste et copiez tous les extraits Markdown d'un coup ou enregistrez-les en fichier .md. La largeur s'ajuste au texte, si bien que 'Build / Passing' et 'License / Apache 2.0' restent équilibrés sans réglage manuel.

Comment utiliser

1. Saisissez le texte du badge — choisissez un libellé (côté gauche) et une valeur (côté droit) comme « Version » et « 2.0 ».
2. Choisissez les couleurs des fonds du libellé et de la valeur, sélectionnez une forme et, si vous le souhaitez, ajoutez un logo de technologie à gauche.
3. Regardez le badge se mettre à jour en direct, puis téléchargez-le en PNG ou en SVG, ou copiez-le en Markdown ou en HTML pour le coller dans un README ou une page.

Quand l'utiliser

• Ajouter un badge de build, version ou couverture à un README GitHub sans fournisseur CI.
• Coller 'Beta', 'Nouveau' ou 'Pro' sur une ligne de feature ou un palier de pricing.
• Mettre en avant une puce de stack technique dans un portfolio ou un CV PDF.

Résultat

Créez un badge de statut de projet : Libellé « Build » en gris, Valeur « Passing » en vert, style plat. Vous obtenez un badge de statut comme ceux des dépôts GitHub.

FAQ

Mes badges fonctionneront-ils si je les héberge en PNG au lieu d'utiliser shields.io ?

Oui. Les SVG et PNG téléchargés sont autonomes et n'appellent aucun serveur. L'inconvénient face à shields.io : pas de donnée en direct, un badge 'version 1.2' reste à 1.2 tant que tu ne le régénères pas.

Quelle est la différence entre flat, rounded et pill ?

Flat a des coins droits avec un léger dégradé, flat-square garde la même forme sans dégradé, rounded utilise un rayon de 4 px, pill termine les bords en demi-cercle et for-the-badge est le style en majuscules, plus haut et en gras, courant dans les README. Choisissez celui qui s'harmonise avec l'interface autour.

Puis-je utiliser mes couleurs de marque au lieu du vert et gris par défaut ?

Oui — la couleur du libellé, celle de la valeur et une couleur de texte distincte pour chaque moitié sont des sélecteurs hex. Essayez un libellé sombre avec un texte clair et une valeur vive pour un fort contraste. L'aperçu se met à jour pendant la saisie.

Vaut-il mieux SVG ou PNG ?

SVG pour les README GitHub, les sites et tout endroit où le badge peut être agrandi (toujours net). PNG quand tu colles dans un endroit qui ne rend pas le SVG : documents Word, messages Slack ou certains outils de capture.

Pourquoi le PNG est-il plus gros que le SVG ?

Le PNG est rendu à 3x la taille d'écran pour rester net sur les écrans haute densité. Un badge SVG typique fait moins de 1 Ko ; le PNG tourne autour de 5 à 15 Ko. SVG quand le poids compte, PNG pour la compatibilité.

Outils similaires