Generador de imágenes de marcador
Crea imágenes de marcador de cualquier tamaño, como SVG, PNG o data URI listo para pegar.
El Generador de imágenes de marcador funciona íntegramente en tu navegador: el SVG se construye y rasteriza en tu dispositivo y no se sube nada.
Abrir el Generador de Open Graph
Acerca de Generador de imágenes de marcador
Los servicios de imágenes de relleno meten una petición de red en mitad de una maquetación que aún estás diseñando, y una página llena de ellas es lenta, inútil sin conexión y depende de que un tercero siga funcionando. Generar el mismo rectángulo gris en local elimina esa dependencia: el resultado es un SVG que puedes guardar, rasterizar a PNG o pegar como data URI sin ninguna petición. Los tamaños cubren los que se usan de verdad —tarjetas sociales, formatos publicitarios, avatares, cabeceras— y la etiqueta muestra por defecto las dimensiones, que es justo lo que quieres mientras depuras una rejilla.
Características
- Cualquier ancho y alto, con preajustes sociales, publicitarios y generales
- Color de fondo y de texto propios, con un valor legible por defecto
- La etiqueta muestra las dimensiones o el texto que escribas
- Radio de esquina y la cruz diagonal típica de los esquemas
- Descarga como SVG o rasterizado a PNG a resolución completa
- Data URI que funciona sin conexión y no cuesta una petición
- Fragmentos listos de HTML, fondo CSS y JSX
- Relación de aspecto simplificada
Cómo usar Generador de imágenes de marcador
- Indica ancho y alto o elige un preajuste
- Escoge colores y una etiqueta, o deja las dimensiones
- Copia el data URI o descarga el SVG o el PNG
- Pega el fragmento de HTML, CSS o JSX en tu maquetación
Ejemplo
Entrada
1200 × 630 · #e5e7eb background
Salida
<img src="data:image/svg+xml,%3Csvg…" width="1200" height="630" alt="" />
Un marcador de tarjeta Open Graph como data URI: sin petición, sin caídas y con el mismo aspecto sin conexión.
Errores comunes y solución de problemas
- El data URI rompe la hoja de estilos. — Enciérralo entre comillas dobles dentro de url(), como hace el fragmento de CSS de aquí.
- El PNG se ve borroso en una pantalla retina. — Genéralo al doble del tamaño de visualización: se rasteriza exactamente a los píxeles que indiques.
- La etiqueta se sale en un rectángulo muy ancho. — El tamaño de fuente se ajusta al alto y al largo del texto, pero una etiqueta muy larga en un banner acaba sin sitio. Acórtala o fija un tamaño.
Preguntas frecuentes
- ¿Cómo hago una imagen de marcador de un tamaño concreto?
- Escribe el ancho y el alto arriba y la imagen se genera al momento. Descárgala como SVG o PNG, o copia el data URI.
- ¿Por qué usar un data URI en vez de un servicio?
- Elimina una petición por imagen, funciona sin conexión y no se rompe cuando un servicio externo cae o limita el uso.
- ¿SVG o PNG para marcadores?
- SVG para pantalla: pesa unos cientos de bytes y se ve nítido a cualquier tamaño. PNG cuando una herramienta exige un mapa de bits.
- ¿Qué tamaño debe tener una imagen Open Graph?
- 1200 por 630 píxeles, que es el preajuste incluido: es lo que recortan Facebook, LinkedIn y la mayoría de vistas previas.
Herramientas relacionadas
Todas las herramientas de ArrayKit