¿Qué es Creador de Insignias y Botones?

Creador de Insignias y Botones genera insignias y escudos personalizados con el texto, colores y formas que elijas. Escribe una etiqueta y un valor, elige un estilo y descárgalo como PNG o SVG.

Crea insignias al estilo shields.io (una píldora dividida en una etiqueta gris y un valor con color) renderizadas como SVG en línea. Elige entre las formas flat, flat-square, rounded, pill o for-the-badge; ajusta colores hexadecimales para cada mitad y un color de texto distinto para la etiqueta y el valor; añade un logo de tecnología (GitHub, npm, Docker, Python, Node.js y más) y deja que se aplique automáticamente su color de marca; envuelve la insignia con una URL clicable; copia el resultado como Markdown para un README, como HTML para un correo o una página web, o descárgala como SVG nítido o PNG a triple resolución. Añade varias insignias a una lista y copia todos los fragmentos de Markdown de una vez o guárdalos como archivo .md. El ancho se adapta al texto, así que 'Build / Passing' y 'License / Apache 2.0' quedan equilibrados sin ajustes manuales.

Cómo usar

1. Escribe el texto de tu insignia — elige una etiqueta (lado izquierdo) y un valor (lado derecho), como "Versión" y "2.0".
2. Elige colores para los fondos de la etiqueta y el valor, escoge una forma y, si quieres, añade un logo de tecnología a la izquierda.
3. Mira cómo se actualiza la insignia en directo y descárgala como PNG o SVG, o cópiala como Markdown o HTML para pegarla en un README o una página.

Cuándo usar

• Añadir un badge de build, versión o cobertura al README de GitHub sin un proveedor CI.
• Poner etiquetas 'Beta', 'Nuevo' o 'Pro' en una fila de features o nivel de pricing.
• Destacar un chip de tecnología en un portafolio o CV en PDF.

Resultado

Crea una insignia de estado para un proyecto: Etiqueta "Build" en gris, Valor "Passing" en verde, estilo plano. Obtienes una insignia de estado como las de los repositorios de GitHub.

Preguntas frecuentes

¿Funcionan los badges si los alojo como PNG sin usar shields.io?

Sí. Los SVG y PNG descargados son autocontenidos y no llaman a ningún servidor. La pega frente a shields.io es que no hay datos en vivo: un badge 'version 1.2' se queda en 1.2 hasta que lo regeneres.

¿Qué diferencia hay entre flat, rounded y pill?

Flat tiene esquinas rectas con un degradado sutil, flat-square es la misma forma pero sin degradado, rounded usa un radio de 4 px, pill remata los extremos en semicírculo y for-the-badge es el estilo en mayúsculas, más alto y en negrita típico de los README. Elige la que combine mejor con el resto de la interfaz.

¿Puedo usar mis colores de marca en lugar del verde y gris por defecto?

Sí — el color de la etiqueta, el del valor y un color de texto independiente para cada mitad son selectores hex. Prueba una etiqueta oscura con texto claro y un valor brillante para un contraste alto. La vista previa se actualiza en tiempo real.

¿Debo elegir SVG o PNG?

SVG para READMEs de GitHub, webs y cualquier lugar que pueda escalar (siempre nítido). PNG cuando vas a pegar en algo que no renderiza SVG: documentos Word, mensajes en Slack o capturas.

¿Por qué el PNG pesa más que el SVG?

El PNG se renderiza a 3x del tamaño en pantalla para verse nítido en pantallas de alta densidad. Un badge SVG típico ronda 1 KB; el PNG suele ir de 5 a 15 KB. SVG cuando importa el peso, PNG cuando importa la compatibilidad.

Herramientas relacionadas