O que é Criador de Emblemas e Botões?

O Criador de Emblemas e Botões gera emblemas e escudos personalizados com texto, cores e formas à sua escolha. Defina um rótulo e um valor, escolha um estilo e baixe como PNG ou SVG.

Cria insígnias no estilo shields.io (uma cápsula colorida dividida em rótulo cinza e valor colorido) renderizadas como SVG embutido. Escolha entre os formatos flat, flat-square, rounded, pill ou for-the-badge; defina cores em hex para cada metade e uma cor de texto separada para o rótulo e o valor; adicione um logotipo de tecnologia (GitHub, npm, Docker, Python, Node.js e outros) e deixe que a cor de marca seja aplicada automaticamente; envolva a insígnia com uma URL clicável; copie o resultado como Markdown para um README, como HTML para um e-mail ou página web, ou baixe como SVG nítido ou PNG em 3x. Adicione várias insígnias a uma lista e copie todos os trechos de Markdown de uma vez ou salve como arquivo .md. A largura se ajusta ao texto, então 'Build / Passing' e 'License / Apache 2.0' ficam equilibrados sem cálculo manual.

Como usar

1. Insira o texto do emblema — escolha um rótulo (lado esquerdo) e um valor (lado direito), como "Versão" e "2.0".
2. Escolha cores para os fundos do rótulo e do valor, selecione um formato e, se quiser, adicione um logotipo de tecnologia à esquerda.
3. Veja a insígnia atualizar em tempo real, depois baixe como PNG ou SVG, ou copie como Markdown ou HTML para colar em um README ou página.

Quando usar

• Adicionar badge de build, versão ou cobertura num README do GitHub sem provedor CI.
• Colocar selos 'Beta', 'Novo' ou 'Pro' em uma linha de feature ou plano de preços.
• Destacar um chip de tecnologia em um portfólio ou currículo em PDF.

Resultado

Crie um emblema de status de projeto: Rótulo "Build" em cinza, Valor "Passing" em verde, estilo plano. Você obtém um emblema de status como os dos repositórios do GitHub.

Perguntas frequentes

Os badges continuam funcionando se eu hospedar como PNG em vez de usar o shields.io?

Sim. Os SVG e PNG baixados são autocontidos e não chamam servidor algum. O contra em relação ao shields.io é não ter dados ao vivo: um badge 'version 1.2' fica em 1.2 até você gerar de novo.

Qual a diferença entre flat, rounded e pill?

Flat tem cantos retos com um degradê sutil, flat-square mantém o mesmo formato sem o degradê, rounded usa raio de 4 px, pill arredonda as pontas em meia-lua e for-the-badge é o estilo em maiúsculas, mais alto e em negrito comum em READMEs. Escolha o que combina com a interface ao redor.

Dá pra usar minhas cores de marca em vez do verde e cinza padrão?

Sim — a cor do rótulo, a cor do valor e uma cor de texto separada para cada metade são seletores hex. Tente um rótulo escuro com texto claro e um valor vivo para alto contraste. O preview atualiza enquanto você digita.

Devo escolher SVG ou PNG?

SVG para README do GitHub, sites e qualquer lugar que escale (sempre nítido). PNG quando precisar colar em algo que não renderiza SVG: documentos Word, mensagens no Slack ou ferramentas de screenshot.

Por que o PNG é maior que o SVG?

O PNG é renderizado em 3x do tamanho da tela para ficar nítido em telas de alta densidade. Um SVG de badge típico tem menos de 1 KB; o PNG costuma ficar entre 5 e 15 KB. SVG quando o peso importa, PNG quando a compatibilidade importa.

Ferramentas relacionadas