1001Ferramentas
🏷️Utilitários

Gerador de Badge Shields.io

Monta a URL de um badge shields.io a partir de label, mensagem e cor, pronto para usar em READMEs.


  

Aquele selo colorido no topo do README

Você quer colocar no README aquele selo cinza e verde do tipo build passing, mas a URL do shields.io tem uma gramática própria: rótulo, mensagem e cor separados por hífen, no meio do caminho. Só que o seu texto também tem hífen, e o resultado sai partido no lugar errado. Este montador escreve a URL certa e já entrega a linha em Markdown pronta para colar.

A regra que resolve quase todo problema é a de escape do próprio shields.io: dentro do caminho, o hífen separa os três pedaços e o sublinhado vira espaço. Para mostrar um hífen literal você escreve dois, e para um sublinhado literal, dois também. A ferramenta faz essa duplicação antes de codificar a URL, então digite o texto normal e deixe a conversão com ela. O que sai é sempre um badge estático, no estilo padrão.

Este é o endpoint de badge fixo: ele não consulta o seu CI, não lê a versão do package.json e não aceita parâmetros de estilo ou logo. Se você quer um selo que muda sozinho conforme o build, precisa dos endpoints dinâmicos do shields, que são outras URLs. Nas cores, use nomes como brightgreen, blue, orange e lightgrey, ou um hexadecimal sem cerquilha. A URL é montada no navegador, e a página não mostra prévia da imagem.

Perguntas frequentes

Como coloco espaço no texto do badge?
Digite normalmente com espaço, que a codificação da URL cuida do resto. Se preferir editar a URL na mão, o sublinhado também é lido como espaço pelo shields.io.
Dá para fazer um badge que mostra o status real do build?
Não com esta URL, que é de badge estático. O shields.io tem endpoints específicos por serviço, como GitHub Actions ou npm, que consultam a fonte e desenham o valor atual.
Posso usar uma cor em hexadecimal?
Sim. Escreva no campo de cor apenas os dígitos, como 4c1 ou 007ec6, sem a cerquilha, para evitar codificação desnecessária na URL.

Ferramentas Relacionadas