Generador de imágenes OG
Escribe un título y subtítulo, elige un fondo sólido o degradado y una URL de logo opcional, previsualiza en vivo la tarjeta social de 1200x630 y descárgala como PNG.
Generador de imágenes OG — Crea la imagen Open Graph de 1200x630 que aparece cuando tu página se comparte en Facebook, X/Twitter, LinkedIn o Slack. Escribe un título y subtítulo, elige un fondo sólido o un degradado de dos colores, ajusta el color y la alineación del texto y, si quieres, indica la URL de un logo. La vista previa se redibuja mientras escribes y puedes descargar la tarjeta terminada como PNG. La imagen se dibuja por completo en un canvas dentro de tu navegador, así que tu texto y tus colores nunca salen de tu dispositivo.
¿Qué es Generador de imágenes OG?
El Generador de Imágenes OG es una herramienta gratuita en el navegador para crear tarjetas para compartir en redes (imágenes Open Graph / Twitter Card) con el tamaño estándar de 1200x630 píxeles. Profesionales de marketing, blogueros, desarrolladores independientes y cualquiera que lance una landing page la usan para conseguir una miniatura de vista previa limpia sin abrir una app de diseño. Escribes el titular y un subtítulo opcional, eliges un color sólido o un degradado diagonal, ajustas el color del texto y la alineación a la izquierda o centrada, y pegas la URL de un logo si quieres una marca en la esquina. El canvas se redibuja en vivo para afinar el texto y los colores, y luego exportas un PNG listo para tu etiqueta meta og:image.
Cómo usar Generador de imágenes OG
- Escribe tu título en el campo Título; se dibuja grande y en negrita y se ajusta hasta en tres líneas.
- Añade un subtítulo opcional debajo del título, o déjalo vacío para mostrar solo el titular.
- Abre Ajustes para elegir un fondo sólido o degradado, fijar los colores de fondo y de texto, y elegir alineación a la izquierda o centrada.
- Pega opcionalmente la URL de una imagen de logo (una imagen con CORS habilitado) para colocar un logo sobre el texto.
- Observa cómo la vista previa de 1200x630 se actualiza en vivo, haz clic para ampliarla y descarga la tarjeta como PNG.
Ejemplos
Tarjeta para compartir una entrada de blog
Escribe el titular del artículo como título y el autor o el nombre del sitio como subtítulo, elige un degradado acorde a tu marca y descarga un PNG de 1200x630 para usarlo como og:image de la entrada.
Banner de lanzamiento de producto
Usa un color de marca sólido, alineación centrada, tu eslogan como título y una URL de logo en la esquina para producir una tarjeta de lanzamiento coherente en todos los canales sociales.
Preguntas frecuentes
- ¿Qué tamaño tiene la imagen generada?
- Siempre 1200x630 píxeles, la proporción estándar de Open Graph y de Twitter summary-large-image (alrededor de 1,91:1). Ese tamaño se ve nítido en las vistas previas de enlaces de Facebook, X/Twitter, LinkedIn, Slack y Discord.
- ¿Cómo añado mi propio logo?
- Pega una URL directa a una imagen de logo en el campo URL del logo. La imagen se obtiene de esa URL y se dibuja sobre el texto a una altura fija conservando su proporción. La fuente debe permitir el uso entre orígenes (CORS) o el navegador bloqueará su dibujo en el canvas.
- ¿Puedo controlar los colores y la disposición?
- Sí. En Ajustes puedes cambiar entre un fondo sólido y un degradado diagonal de dos colores, fijar los colores de fondo y de texto, y elegir alineación a la izquierda o centrada. El título y el subtítulo se ajustan automáticamente y el texto largo se recorta con puntos suspensivos.
- ¿Se sube mi texto o imagen a algún sitio?
- No. La tarjeta se dibuja por completo en un canvas HTML dentro de tu navegador y se exporta a PNG localmente. Tu título, subtítulo y colores nunca se envían a un servidor. Solo se solicita la URL de logo que indiques, y esa petición va directamente desde tu navegador al host que elijas.
Herramientas relacionadas
Código a imagen
Convierte un fragmento de código en una imagen PNG pulida con resaltado de sintaxis en tu navegador, con tema, fondo de degradado o transparente y relleno, sin subir nada.
Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color HEX de primer plano y uno de fondo, y si cumple AA y AAA para texto normal y grande.
Mezclador de colores
Mezcla dos colores HEX en la proporción que elijas, en espacio RGB o Lab, y obtén el color intermedio como muestra y valor HEX copiable.
Generador de tonos de color
Convierte un color HEX base en una escala de tonos 50-950 al estilo Tailwind, mezclando hacia blanco y negro, con muestra y HEX copiable.