Generador de insignias para README
Crea las insignias de estado que aparecen al principio de un README de GitHub: licencia, versión de npm, build de CI, cobertura, descargas, estrellas o cualquier etiqueta y color personalizados. Rellena tu repositorio una vez, previsualiza cada estilo y copia el código listo en Markdown, HTML o reStructuredText.
Última actualización:
Insignias
Vista previa
Cómo usar Generador de insignias para README
- Introduce tu proyecto: propietario de GitHub, repositorio, nombre del paquete npm y archivo del workflow de CI.
- Añade insignias con los botones, por ejemplo Licencia, Estado de la build o una insignia Personalizada.
- Personaliza cada insignia: etiqueta, color, logo de Simple Icons y a dónde enlaza.
- Elige un estilo y revisa la vista previa; marca Cargar insignias reales para ver los valores en vivo.
- Copia el código en Markdown, HTML o reStructuredText y pégalo al principio de tu README.
Patrones de URL de Shields.io
| Insignia | Ruta de la URL después de https://img.shields.io/ |
|---|---|
| Estática (etiqueta, mensaje, color) | badge/build-passing-brightgreen |
| Estática sin etiqueta | badge/stable-blue |
| Licencia desde GitHub | github/license/OWNER/REPO |
| Versión de npm | npm/v/PACKAGE |
| Descargas mensuales de npm | npm/dm/PACKAGE |
| Workflow de GitHub Actions | github/actions/workflow/status/OWNER/REPO/ci.yml?branch=main |
| Cobertura de Codecov | codecov/c/github/OWNER/REPO |
| Estrellas / issues / último commit de GitHub | github/stars/OWNER/REPO, github/issues/OWNER/REPO, github/last-commit/OWNER/REPO |
Todas las insignias aceptan las mismas opciones de consulta: style, label, color, labelColor, logo y logoColor. Por ejemplo ?style=for-the-badge&logo=github.
Consejos para una fila de insignias ordenada
- Sé breve. De tres a seis insignias responden a las preguntas que realmente tienen los visitantes: ¿compila?, ¿qué versión es?, ¿con qué licencia?, ¿se mantiene?
- Pon primero la insignia más importante, normalmente el estado de la build o de la CI.
- Usa un solo estilo en toda la fila para que las alturas coincidan.
- Enlaza cada insignia a la página que la explica: las ejecuciones del workflow, la página de npm o el archivo LICENSE.
- Escribe un texto alternativo significativo como “estado de la build” para que los lectores de pantalla y las imágenes rotas sigan teniendo sentido.
¿Empiezas un README desde cero? El Generador de README crea el resto del archivo, y el Generador de licencias crea el LICENSE al que apunta tu insignia.
Preguntas frecuentes
¿Cómo funcionan las insignias de README?
Una insignia es solo una imagen. Shields.io genera el SVG bajo demanda a partir de la URL: una insignia estática codifica su etiqueta, mensaje y color en la ruta, y una insignia dinámica como github/license/owner/repo consulta el valor actual en GitHub, npm u otro servicio cada vez que se ve el README.
¿Cómo escribo un guion, un guion bajo o un espacio en una insignia estática?
En la URL de una insignia estática de Shields.io, los guiones separan la etiqueta, el mensaje y el color, así que un guion literal se escribe como dos guiones (--). Un guion bajo o %20 significa un espacio, así que un guion bajo literal se escribe como dos guiones bajos (__). Este generador aplica estas reglas por ti.
¿Qué logos puedo usar?
Shields.io acepta los nombres de Simple Icons, como github, npm, python, docker, javascript o githubactions. Escribe el nombre en minúsculas y sin espacios. logoColor cambia el color del icono; la vista previa sin conexión muestra un marcador donde aparecerá el icono.
¿Por qué mi insignia dice "repo not found" o "invalid"?
Las insignias dinámicas leen datos en vivo, así que el repositorio, el paquete o el workflow deben existir y ser públicos. Revisa cómo están escritos el propietario, el repositorio y el paquete y, en las insignias de build, el nombre exacto del archivo del workflow en .github/workflows, como ci.yml.
¿Qué colores puedo usar?
Colores con nombre (brightgreen, green, yellowgreen, yellow, orange, red, blue, lightgrey, grey, blueviolet), los nombres semánticos success, important, critical, informational e inactive, o cualquier código hexadecimal como ff69b4. Deja vacío el color de una insignia dinámica para usar el color que Shields.io elige según el valor.
¿Qué estilo de insignia debo elegir?
flat es el estilo predeterminado más común. flat-square tiene esquinas cuadradas, for-the-badge es más grande con texto en mayúsculas y va bien en páginas de presentación de proyectos, plastic es el aspecto brillante antiguo y social imita los botones de estrella y seguir de GitHub. Usa el mismo estilo para todas las insignias de una fila.
¿Se sube algo?
No. El código de las insignias se crea en tu navegador y la vista previa predeterminada se dibuja localmente. Solo si marcas Cargar insignias reales tu navegador pide las imágenes de las insignias a img.shields.io, exactamente como hará GitHub cuando muestre tu README.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.