piapia123
es

Generador de insignias shields

Web

Todo se ejecuta en tu navegador: no se sube nada

Contenido de la insignia
Vista previa (dibujada en local, sin red)

Esta vista previa es una aproximación dibujada en local: la imagen real la renderiza shields.io con métricas de fuente reales, así que las anchuras pueden diferir en unos píxeles.

Fragmentos listos para pegar

Crea esas insignias pequeñas que viven en los README: rellena el texto izquierdo y el derecho, elige colores y un estilo, y copia los fragmentos listos para pegar (URL, Markdown, HTML, reStructuredText) más un SVG que funciona sin conexión. ⚠️ La vista previa se dibuja en local: esta página no hace ninguna petición de red. El atajo habitual es una vista previa con `<img src="https://img.shields.io/…">`, pero eso hace que la página pida una imagen a un tercero con cada tecla que escribes, y además envía allí tu texto. Así que la vista previa de aquí es un SVG montado en local; no sale ni un byte. ⚠️ La URL generada sí apunta a shields.io, en cambio. Cuando la pegues en un README, los navegadores de quienes lo lean pedirán esa imagen a shields.io: una petición que no has hecho ni tú ni esta herramienta, pero que conviene conocer. Si prefieres que nadie contacte con un tercero, usa el fragmento «código SVG»: es autocontenido y se muestra donde lo pongas. ⚠️ La vista previa local es una aproximación. La imagen real la dibuja shields.io con métricas de fuente reales, mientras que aquí solo se puede estimar con una tabla de anchuras (en Node no hay canvas, y no hay garantía de qué fuentes tenga un navegador). Por eso las anchuras pueden diferir en unos píxeles: mejor decirlo que fingir precisión. Los cuatro estilos: `flat` es el aspecto redondeado por defecto, `flat-square` es recto, `plastic` añade un ligero brillo vertical y `for-the-badge` es más alto, con texto mayor y todo en mayúsculas.

Funciones

  • La vista previa se dibuja en local: la página no emite ninguna petición de red
  • Cuatro estilos: flat, flat-square, plastic y for-the-badge
  • Colores con nombre (`brightgreen` y compañía) o un hexadecimal propio, con color de etiqueta aparte
  • Icono opcional de simple-icons (escribe su slug, p. ej. `github`)
  • Cinco fragmentos: URL de la insignia, Markdown, HTML, reStructuredText y código SVG sin conexión
  • Descarga el SVG: ese fragmento no depende de nada
  • Cada fragmento se copia por separado

Cómo se usa

  1. Rellena el texto izquierdo y el derecho
  2. Elige colores y un estilo (añade un slug de icono si quieres)
  3. Mira la vista previa y ajusta
  4. Copia el fragmento que necesites o descarga el SVG

Preguntas frecuentes

¿Esta herramienta envía mi texto a shields.io?
No. La vista previa es un SVG montado en local y la página no hace ninguna petición: abre el panel Red de tus herramientas de desarrollo y escribe unos caracteres; no verás peticiones externas. Pero la URL que compartes sí apunta a shields.io: cuando alguien abre tu README, el navegador de *esa persona* pide la imagen. Esa petición ocurre en tu sitio, la hace quien te lee y no tiene nada que ver con esta herramienta, pero como la URL apunta a un tercero, conviene saberlo. Si prefieres que quienes te lean no contacten con un tercero, usa el fragmento «código SVG»: pon el SVG en tu repositorio o tu página y queda autocontenido.
¿Por qué la vista previa difiere un poco de lo que muestra GitHub?
Porque la anchura es una estimación. shields.io mide la anchura de la etiqueta en el servidor con métricas de fuente reales, mientras que aquí se monta el SVG en el navegador: no se puede suponer que Verdana esté instalada, y cargar una fuente solo para medir una cadena sería absurdo. Así que se usa una tabla de anchuras propia (`i` y `l` más estrechas que `m` y `w`, y los caracteres CJK contados como de doble anchura). La consecuencia: el color, el estilo y el texto coinciden exactamente; las anchuras pueden diferir en unos píxeles. La imagen real que dibuja shields.io manda. Como ventaja secundaria, la conversión a mayúsculas de `for-the-badge` aquí es exacta: no depende de las fuentes.
¿Se puede usar texto no latino en la etiqueta?
Sí. El texto no ASCII se codifica en la URL (`café` pasa a `caf%C3%A9`) y shields.io lo muestra bien. Los caracteres CJK también se cuentan como de doble anchura en la vista previa local, así que no se aplastan. Eso sí, los algoritmos de anchura siguen siendo distintos (mira la pregunta anterior), y esa diferencia se nota más con caracteres de doble anchura.

Herramientas relacionadas

Analizador de UA

Web

Analiza un User-Agent: navegador, versión, sistema, tipo de dispositivo y motor, con las reglas que coinciden. Solo coincidencia de patrones.

Códigos de estado HTTP

Web

Consulta un código de estado HTTP: significado, clase 1xx–5xx, usos típicos y trampas habituales. También busca por palabra clave. Todo local.

Tipos MIME

Web

Consulta el tipo MIME a partir de una extensión, o la extensión por defecto de un tipo de medio. Solo los habituales. Todo en tu navegador.

Analizador de URL

Web

Descompone una URL en esquema, host, puerto, ruta, parámetros y ancla, con cada parámetro en crudo y decodificado. Todo en tu navegador.

Generador de .gitignore

Web

Genera un .gitignore a partir de plantillas de lenguaje, framework, editor y sistema. Las secciones se fusionan y se quitan duplicados. Todo local.

Imagen a Base64

Web

Convierte una imagen a Base64 o a data URL soltándola, eligiéndola o pegándola. Redimensiona y cambia de formato en local; nunca se sube nada.

← Volver a todas las herramientas