Construire un profil GitHub qui attire l'attention — badges dynamiques, stats en temps réel, mise en page soignée et automatisation via GitHub Actions.
Shields.io génère des badges SVG à la volée via une URL. Chaque badge est une image — on l'intègre avec <img> ou la syntaxe Markdown ![]().
https://img.shields.io/badge/{label}-{message}-{color}?style={style}&logo={logo}&logoColor={logoColor}Exemple :
https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vuedotjs&logoColor=whiteRésultat : un badge vert avec le logo Vue et le texte "Vue.js".
| Paramètre | Rôle | Exemple |
|---|---|---|
label | Texte gauche (optionnel) | Made%20with |
message | Texte droite | Vue.js |
color | Couleur de fond | 4FC08D ou green |
style | Style visuel | flat, flat-square, for-the-badge, plastic |
logo | Icône Simple Icons | vuedotjs, docker, typescript |
logoColor | Couleur de l'icône | white, 000, fff |
Les espaces dans les textes s'encodent %20. Les # dans les hex se retirent — #3b82f6 devient 3b82f6.
<!-- flat — le plus discret -->
<!-- flat-square — sans arrondi -->
<!-- for-the-badge — le plus imposant, recommandé pour les profils -->
for-the-badge est le choix standard pour les profils — plus lisible, meilleur rendu sur fond sombre.
<div align="center">
<!-- Frontend -->
<img src="https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vuedotjs&logoColor=white" alt="Vue" />
<img src="https://img.shields.io/badge/Nuxt-00DC82?style=for-the-badge&logo=nuxtdotjs&logoColor=white" alt="Nuxt" />
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
<img src="https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white" alt="Tailwind" />
<!-- Backend -->
<img src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white" alt="Node" />
<img src="https://img.shields.io/badge/PostgreSQL-4169E1?style=for-the-badge&logo=postgresql&logoColor=white" alt="PostgreSQL" />
<img src="https://img.shields.io/badge/GraphQL-E10098?style=for-the-badge&logo=graphql&logoColor=white" alt="GraphQL" />
<!-- DevOps -->
<img src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker" />
<img src="https://img.shields.io/badge/Nginx-009639?style=for-the-badge&logo=nginx&logoColor=white" alt="Nginx" />
<img src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" alt="Linux" />
<!-- Outils -->
<img src="https://img.shields.io/badge/VSCode-007ACC?style=for-the-badge&logo=visualstudiocode&logoColor=white" alt="VSCode" />
<img src="https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white" alt="Figma" />
<img src="https://img.shields.io/badge/Postman-FF6C37?style=for-the-badge&logo=postman&logoColor=white" alt="Postman" />
</div>Les logos viennent de Simple Icons. Le nom du logo dans l'URL shields.io = le slug Simple Icons en minuscules, sans espaces :
| Technologie | Slug |
|---|---|
| Vue.js | vuedotjs |
| Nuxt.js | nuxtdotjs |
| Node.js | nodedotjs |
| Next.js | nextdotjs |
| TypeScript | typescript |
| PostgreSQL | postgresql |
| Docker | docker |
| Tailwind CSS | tailwindcss |
| GitHub Actions | githubactions |
| n8n | n8n |
Chercher sur simpleicons.org le nom exact, puis l'utiliser en minuscules dans l'URL.
<div align="center">
<a href="https://iducation.fr">
<img src="https://img.shields.io/badge/iducation.fr-000000?style=for-the-badge&logo=safari&logoColor=white" alt="Site" />
</a>
<a href="https://linkedin.com/in/votre-pseudo">
<img src="https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" />
</a>
<a href="https://twitter.com/votre-pseudo">
<img src="https://img.shields.io/badge/Twitter-000000?style=for-the-badge&logo=x&logoColor=white" alt="Twitter/X" />
</a>
</div>Envelopper chaque badge dans un <a> le rend cliquable directement depuis le profil.
<img src="https://komarev.com/ghpvc/?username=williamloree&style=for-the-badge&color=blue" alt="Profile Views" />komarev.com/ghpvc compte les visites de votre profil et affiche le nombre dans un badge. Le compteur est persistant côté serveur.