Quantas vezes você já pode ter se perguntado como isso funciona? E como fazer?
Nesse artigo vou mostrar como criar badges para seus repos.
Lá no Shields.io os caras tem muitas opções para vários tipos de plataformas, repositórios entre outros
Como já sabem essa informação fica no README.md do nosso repositório do Github. Aqui vou colocar alguns exemplos:
- Pegue a URL
- Cria a img
<img src="BadgeURLAqui" />ou - Copie e cole no seu perfil
| Badge | URL |
|---|---|
 |
https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge&logo=whatsapp&logoColor=white |
 |
https://img.shields.io/badge/Telegram-2CA5E0?style=for-the-badge&logo=telegram&logoColor=white |
 |
https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white |
 |
https://img.shields.io/badge/Messenger-00B2FF?style=for-the-badge&logo=messenger&logoColor=white |
 |
https://img.shields.io/badge/ProtonMail-8B89CC?style=for-the-badge&logo=protonmail&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_Outlook-0078D4?style=for-the-badge&logo=microsoft-outlook&logoColor=white |
| Badge | URL |
|---|---|
 |
https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white |
 |
https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white |
 |
https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white |
 |
https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white |
 |
https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white |
 |
https://img.shields.io/badge/Reddit-FF4500?style=for-the-badge&logo=reddit&logoColor=white |
 |
https://img.shields.io/badge/TikTok-000000?style=for-the-badge&logo=tiktok&logoColor=white |
 |
https://img.shields.io/badge/GitLab-330F63?style=for-the-badge&logo=gitlab&logoColor=white |
 |
https://img.shields.io/badge/Bitbucket-330F63?style=for-the-badge&logo=bitbucket&logoColor=white |
 |
https://img.shields.io/badge/XDA_Developers-F59812?style=for-the-badge&logo=xda-developers&logoColor=white |
 |
https://img.shields.io/badge/Stack_Overflow-FE7A16?style=for-the-badge&logo=stack-overflow&logoColor=white |
 |
https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white |
 |
https://img.shields.io/badge/Rocket.Chat-F5455C?style=for-the-badge&logo=rocket.chat&logoColor=white |
| Badge | URL |
|---|---|
 |
https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white |
 |
https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white |
 |
https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white |
 |
https://img.shields.io/badge/Blogger-FF5722?style=for-the-badge&logo=blogger&logoColor=white |
 |
https://img.shields.io/badge/RSS-FFA500?style=for-the-badge&logo=rss&logoColor=white |
 |
https://img.shields.io/badge/WordPress-006E93?style=for-the-badge&logo=wordpress&logoColor=white |
| Badge | URL |
|---|---|
 |
https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white |
 |
https://img.shields.io/badge/Twitch-9146FF?style=for-the-badge&logo=twitch&logoColor=white |
 |
https://img.shields.io/badge/YouTube_Gaming-FF0000?style=for-the-badge&logo=youtube-gaming&logoColor=white |
 |
https://img.shields.io/badge/Facebook_Gaming-005FED?style=for-the-badge&logo=facebook-gaming&logoColor=white |
 |
https://img.shields.io/badge/Crunchyroll-F47521?style=for-the-badge&logo=crunchyroll&logoColor=white |
 |
https://img.shields.io/badge/Netflix-E50914?style=for-the-badge&logo=netflix&logoColor=white |
| Badge | URL |
|---|---|
 |
https://img.shields.io/badge/C%23-239120?style=for-the-badge&logo=c-sharp&logoColor=white |
 |
https://img.shields.io/badge/Xamarin-3498DB?style=for-the-badge&logo=xamarin&logoColor=white |
 |
https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white |
 |
https://img.shields.io/badge/HTML-239120?style=for-the-badge&logo=html5&logoColor=white |
 |
https://img.shields.io/badge/CSS-239120?&style=for-the-badge&logo=css3&logoColor=white |
 |
https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white |
 |
https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black |
 |
https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white |
 |
https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E |
 |
https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white |
 |
https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white |
 |
https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white |
 |
https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white |
 |
https://img.shields.io/badge/Python-14354C?style=for-the-badge&logo=python&logoColor=white |
 |
https://img.shields.io/badge/C-00599C?style=for-the-badge&logo=c&logoColor=white |
 |
https://img.shields.io/badge/C%2B%2B-00599C?style=for-the-badge&logo=c%2B%2B&logoColor=white |
|
https://img.shields.io/badge/C%23-239120?style=for-the-badge&logo=c-sharp&logoColor=white |
 |
https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white |
 |
https://img.shields.io/badge/PHP-777BB4?style=for-the-badge&logo=php&logoColor=white |
 |
https://img.shields.io/badge/R-276DC3?style=for-the-badge&logo=r&logoColor=white |
 |
https://img.shields.io/badge/Swift-FA7343?style=for-the-badge&logo=swift&logoColor=white |
 |
https://img.shields.io/badge/Kotlin-0095D5?&style=for-the-badge&logo=kotlin&logoColor=white |
 |
https://img.shields.io/badge/Go-00ADD8?style=for-the-badge&logo=go&logoColor=white |
 |
https://img.shields.io/badge/Ruby-CC342D?style=for-the-badge&logo=ruby&logoColor=white |
 |
https://img.shields.io/badge/Scala-DC322F?style=for-the-badge&logo=scala&logoColor=white |
 |
https://img.shields.io/badge/Rust-000000?style=for-the-badge&logo=rust&logoColor=white |
 |
https://img.shields.io/badge/Dart-0175C2?style=for-the-badge&logo=dart&logoColor=white |
 |
https://img.shields.io/badge/Lua-2C2D72?style=for-the-badge&logo=lua&logoColor=white |
 |
https://img.shields.io/badge/Perl-39457E?style=for-the-badge&logo=perl&logoColor=white |
 |
https://img.shields.io/badge/Elixir-4B275F?style=for-the-badge&logo=elixir&logoColor=white |
 |
https://img.shields.io/badge/Markdown-000000?style=for-the-badge&logo=markdown&logoColor=white |
 |
https://img.shields.io/badge/Shell_Script-121011?style=for-the-badge&logo=gnu-bash&logoColor=white |
 |
https://img.shields.io/badge/Express.js-404D59?style=for-the-badge |
 |
https://img.shields.io/badge/Gatsby-663399?style=for-the-badge&logo=gatsby&logoColor=white |
 |
https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB |
 |
https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB |
 |
https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00 |
 |
https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D |
 |
https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white |
 |
https://img.shields.io/badge/AngularJS-E23237?style=for-the-badge&logo=angularjs&logoColor=white |
 |
https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white |
 |
https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white |
 |
https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white |
 |
https://img.shields.io/badge/Material--UI-0081CB?style=for-the-badge&logo=material-ui&logoColor=white |
 |
https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white |
 |
https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white |
 |
https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white |
 |
https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=white |
 |
https://img.shields.io/badge/Ruby_on_Rails-CC0000?style=for-the-badge&logo=ruby-on-rails&logoColor=white |
 |
https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white |
 |
https://img.shields.io/badge/Spring-6DB33F?style=for-the-badge&logo=spring&logoColor=white |
 |
https://img.shields.io/badge/Flask-000000?style=for-the-badge&logo=flask&logoColor=white |
 |
https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white |
 |
https://img.shields.io/badge/MySQL-00000F?style=for-the-badge&logo=mysql&logoColor=white |
 |
https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&logo=postgresql&logoColor=white |
 |
https://img.shields.io/badge/MariaDB-01529E?style=for-the-badge&logo=mariadb&logoColor=white |
 |
https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white |
 |
https://img.shields.io/badge/SQLite-07405E?style=for-the-badge&logo=sqlite&logoColor=white |
 |
https://img.shields.io/badge/Firebase-F29D0C?style=for-the-badge&logo=firebase&logoColor=white |
 |
https://img.shields.io/badge/Redis-D9281A?style=for-the-badge&logo=redis&logoColor=white |
 |
https://img.shields.io/badge/Unity-100000?style=for-the-badge&logo=unity&logoColor=white |
 |
https://img.shields.io/badge/Digital Ocean-0080FF?style=for-the-badge&logo=digitalocean&logoColor=white |
 |
https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white |
 |
https://img.shields.io/badge/Heroku-430098?style=for-the-badge&logo=heroku&logoColor=white |
 |
https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&logo=amazon-aws&logoColor=white |
 |
https://img.shields.io/badge/Google_Cloud-4285F4?style=for-the-badge&logo=google-cloud&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_Azure-0089D6?style=for-the-badge&logo=microsoft-azure&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_Excel-217346?style=for-the-badge&logo=microsoft-excel&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_PowerPoint-B7472A?style=for-the-badge&logo=microsoft-powerpoint&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_Access-A4373A?style=for-the-badge&logo=microsoft-access&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_SQL_Server-CC2927?style=for-the-badge&logo=microsoft-sql-server&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_Office-D83B01?style=for-the-badge&logo=microsoft-office&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_SharePoint-0078D4?style=for-the-badge&logo=microsoft-sharepoint&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_Word-2B579A?style=for-the-badge&logo=microsoft-word&logoColor=white |
 |
https://img.shields.io/badge/Microsoft_Visio-3955A3?style=for-the-badgee&logo=microsoft-visio&logoColor=white |
 |
https://img.shields.io/badge/Microsoft-666666?style=for-the-badge&logo=microsoft&logoColor=white |
 |
https://img.shields.io/badge/SAP-0FAAFF?style=for-the-badge&logo=sap&logoColor=white |
 |
https://img.shields.io/badge/CircleCI-000000?style=for-the-badge&logo=circleci&logoColor=white |
 |
https://img.shields.io/badge/Apache-CA2136?style=for-the-badge&logo=apache&logoColor=white |
 |
https://img.shields.io/badge/Nginx-009639?style=for-the-badge&logo=nginx&logoColor=white |
 |
https://img.shields.io/badge/Travis-E4D766?style=for-the-badge&logo=travis&logoColor=white |
 |
https://img.shields.io/badge/Jenkins-D33833?style=for-the-badge&logo=jenkins&logoColor=white |
 |
https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white |
 |
https://img.shields.io/badge/Podman-892CA0?style=for-the-badge&logo=podman&logoColor=white |
 |
https://img.shields.io/badge/Kubernetes-326DE6?style=for-the-badge&logo=kubernetes&logoColor=white |
 |
https://img.shields.io/badge/Vagrant-2966CE?style=for-the-badge&logo=vagrant&logoColor=white |
 |
https://img.shields.io/badge/Ansible-000000?style=for-the-badge&logo=Ansible&logoColor=white |
 |
https://img.shields.io/badge/Chef-EF9600?style=for-the-badge&logo=chef&logoColor=white |
 |
https://img.shields.io/badge/Puppet-FFAD19?style=for-the-badge&logo=puppet&logoColor=black |
 |
https://img.shields.io/badge/Terraform-7B42BC?style=for-the-badge&logo=terraform&logoColor=white |
 |
https://img.shields.io/badge/Packer-1DAEFF?style=for-the-badge&logo=packer&logoColor=white |
 |
https://img.shields.io/badge/OpenStack-EA2046?style=for-the-badge&logo=openstack&logoColor=white |
 |
https://img.shields.io/badge/Prometheus-E6522C?style=for-the-badge&logo=prometheus&logoColor=white |
 |
https://img.shields.io/badge/Elastic-FFFFFF?style=for-the-badge&logo=elastic&logoColor=black |
 |
https://img.shields.io/badge/Consul-FFFFFF?style=for-the-badge&logo=consul&logoColor=black |
 |
https://img.shields.io/badge/Istio-516BAA?style=for-the-badge&logo=istio&logoColor=white |
 |
https://img.shields.io/badge/Valt-FFFFFF?style=for-the-badge&logo=vault&logoColor=black |
 |
https://img.shields.io/badge/Git-E34F26?style=for-the-badge&logo=git&logoColor=white |
 |
https://img.shields.io/badge/Windows-017AD7?style=for-the-badge&logo=windows&logoColor=white |
 |
https://img.shields.io/badge/Linux-E34F26?style=for-the-badge&logo=linux&logoColor=black |
| Badge | URL |
|---|---|
 |
https://img.shields.io/badge/PlayStation-003791?style=for-the-badge&logo=playstation&logoColor=white |
 |
https://img.shields.io/badge/Xbox-107C10?style=for-the-badge&logo=xbox&logoColor=white |
 |
https://img.shields.io/badge/Nintendo_Switch-E60012?style=for-the-badge&logo=nintendo-switch&logoColor=white |
 |
https://img.shields.io/badge/Steam-000000?style=for-the-badge&logo=steam&logoColor=white |
 |
https://img.shields.io/badge/Counter_Strike-000000?style=for-the-badge&logo=counter-strike&logoColor=white |
 |
https://img.shields.io/badge/Itch.io-FA5C5C?style=for-the-badge&logo=itch.io&logoColor=white |
 |
https://img.shields.io/badge/Stadia-CD2640?style=for-the-badge&logo=stadia&logoColor=white |
 |
https://img.shields.io/badge/Nintendo_3DS-D12228?style=for-the-badge&logo=nintendo-3ds&logoColor=white |