Generador de insignia de README (estilo Shields.io)

Generador de Badges en README

El Generador de Badges en README crea insignias perfectas en pixel en su navegador. Elige un modelo predeterminado o crea uno propio, selecciona colores y un estilo (plano, cuadrado plano, para el badge o plástico), y obtén salida lista para copiar en Markdown, HTML, SVG y URL de datos. Sin llamadas a API externas, sin dependencia de red, sin insignias rotas cuando el servicio está inactivo — el SVG se genera en el lado del cliente y se incluye directamente.

Cómo Usar

1. Elige un modelo del menú de Plantillas, o mantén en Personalizado y rellena tus propios texto de etiqueta y mensaje.
2. Elige un color de etiqueta y un color de mensaje — colores predeterminados de Shields.io o un código hexadecimal personalizado.
3. Selecciona un estilo de badge: plano, cuadrado plano, para el badge o plástico.
4. Observa cómo se actualiza el previsualizador en fondos claro y oscuro.
5. Copia el fragmento en Markdown, etiqueta HTML, URL o SVG — o descarga el archivo SVG.

Características

• Cuatro estilos de badge – Plano, cuadrado plano, para el badge (mayúsculas, más alto), y plástico con sombreado de gradiente.
• Modelos incluidos – Versión, licencia, estado de construcción, cobertura, descargas, estrellas y plantilla “hecho con amor”.
• Previsualización en tiempo real – Renderizado inmediato con un interruptor de fondo claro/oscuro para ver cómo el badge se adapta a diferentes temas en README.
• Cuatro formatos de salida – Fragmento en Markdown, etiqueta HTML img, URL de datos SVG y marcado SVG original.
• SVG autónomo – El texto se renderiza como nodos SVG reales con anchos medidos, sombras y esquinas redondeadas según sea necesario.
• Colores personalizados – Paleta estándar de Shields.io más un selector de hexadecimales personalizados.
• 100% del lado del cliente – Sin llamadas a API, sin seguimiento, sin límites de velocidad. Funciona en modo offline una vez que la página se haya cargado.
• Copia en un clic y descarga SVG – Exporta un archivo .svg independiente para colocarlo en cualquier repositorio.

Casos de uso común

• READMEs abiertos al público – Muestra el estado de construcción, versión, licencia, cobertura o número de descargas de forma rápida.
• Paneles de proyecto – Integra insignias consistentes en wikis internas y sitios de documentación.
• Sitios de portafolios – Decorar las tarjetas de proyectos con etiquetas estilizadas sin cargar servicios de imágenes externos.
• Páginas de marketing – Usa insignias “hecho con” y personalizadas como elementos decorativos ligeros.
• Documentación offline – Envía insignias que se renderizan incluso cuando se bloquea shields.io.

¿Por qué generar insignias localmente?

Los servicios remotos de insignias son convenientes, pero añaden un salto de red cada vez que alguien carga su README. Cuando esos servicios se ralentizan, se limitan o cambian sus configuraciones predeterminadas, tus insignias se rompen silenciosamente. Una insignia SVG generada localmente es un archivo estático — se renderiza en cualquier lugar donde se use Markdown o HTML, se incluye con tu repositorio y sobrevive a los outages del servicio. También te da control completo sobre colores, espaciado y peso de fuente, para que las insignias coincidan con un estilo visual consistente en toda la organización.