Le but est simple : Créer un générateur de badges complet et open-design, tout en étant un outil gratuit, sans tracking ni inscription, permettant de créer en quelques clics des badges entièrement personnalisés : texte, logo SimpleIcons, couleurs, style et taille.
➜ Accéder à l’outil : https://black-lab.fr/badges-generator/
Exemple: 
Les badges Shields.io sont devenus la référence pour illustrer le statut d’un projet, les technologies utilisées ou simplement apporter une touche visuelle aux README GitHub et aux documentations techniques.
Après avoir testé la plupart des générateurs existants, j’ai développé une alternative plus complète, plus fluide et surtout plus fiable – notamment sur l’export PNG haute résolution avec une mise à l’échelle réelle.
L’outil est codé intégralement à la main (PHP + CSS + JavaScript vanilla), sans aucune dépendance externe lourde.
- Texte libre à gauche (label) et à droite (message)
- Tous les styles officiels : flat · flat-square · plastic · for-the-badge · social
- Logo SimpleIcons (plus de 3000 icônes disponibles) avec couleur personnalisable
- Couleurs totalement libres pour le label, le message et le logo
- Trois tailles (S / M / L) avec véritable mise à l’échelle
- Aperçu en temps réel
- Copie instantanée de l’URL et du code Markdown
- Téléchargement direct en SVG (vectoriel) et PNG (bitmap haute résolution, scale respecté)
Exemples concrets
Voici le même badge affiché en trois tailles différentes :
- Small (S)
 - Medium (M)
 - Large (L)
(dans l’outil, la mise à l’échelle est appliquée directement au rendu PNG, sans perte de qualité)
Comparatif rapide
| Fonctionnalité | Version proposée | Autres générateurs |
|---|---|---|
| Styles officiels (5) | ✅ | ✅ |
| Logos SimpleIcons (3000+) | ✅ | ⚠️ souvent limité |
| Couleurs libres | ✅ | ✅ |
| Aperçu en temps réel | ✅ | ✅ |
| Export PNG haute résolution | ✅ | ❌ souvent absent |
| Export SVG direct | ✅ | ✅ |
| Sans tracking / inscription | ✅ | ❌ parfois requis |
Sous le capot – morceaux de code clés
1. Construction de l’URL Shields.io
Cette fonction assemble proprement l’URL en tenant compte du style, des couleurs et du logo SimpleIcons.
2. Échappement des caractères spéciaux
Indispensable pour éviter les erreurs d’encodage : les tirets et underscores sont doublés avant encodage.
3. Mise à jour instantanée de l’aperçu
Chaque modification est immédiatement reflétée dans l’interface, avec copie automatique de l’URL et du Markdown.
4. Téléchargement PNG haute résolution
Le gros plus : un rendu bitmap respectant la mise à l’échelle réelle, sans perte de netteté.
Transparence & dépendances
Comme tous les générateurs de badges Shields.io, cet outil repose sur le service officiel img.shields.io pour générer les images. En cas d’indisponibilité exceptionnelle de ce service (rare), les aperçus et téléchargements seraient temporairement inaccessibles.
Aucun autre service tiers n’est sollicité : SimpleIcons.org n’est utilisé que comme référence pour les noms d’icônes (les SVG sont servis directement par shields.io).
Que ce soit pour un README GitHub, une documentation technique ou un projet open-source, ce générateur vous offre des badges précis, modernes, et sous Licence CC BY-NC 4.0. 