Generador de imagen de portada de artículo dev.to｜Portada lista en segundos con solo título y etiqueta

Genera la imagen de portada de un artículo dev.to en la proporción oficial de 1000×420 a partir de tres campos de texto (título, etiqueta, autor) y un color de acento, y exporta un PNG retina de 2000×840 mediante Canvas 2D — sin abrir Canva ni Figma.

💡 Sobre esta herramienta

Si estás aprendiendo a publicar en dev.to o ya escribes con frecuencia, la imagen de portada suele ser el paso que más fricción añade: abrir Canva, duplicar la plantilla del artículo anterior, cambiar el título, ajustar la tipografía, exportar, subir. Es trabajo repetitivo que no aporta al contenido.

Esta herramienta reduce ese flujo a una sola pantalla: escribe el título del artículo, la etiqueta principal y tu nombre, elige un color de acento entre cuatro opciones (rosa, cian, menta o ámbar) y descarga el resultado. Canvas 2D dibuja en una proporción interna de 1000×420 — la oficial de dev.to — una barra vertical de acento de 16 px a la izquierda, la etiqueta como pequeño rótulo superior, el título envuelto en dos líneas y el nombre del autor en la parte inferior. El PNG final se escala 4× a 2000×840 píxeles, suficiente para verse nítido incluso en pantallas retina. El botón Reiniciar devuelve los campos a una muestra inicial pensada para principiantes, por lo que nunca empiezas desde una pantalla vacía.

🧐 Preguntas frecuentes

P. ¿Qué tamaño tiene el PNG generado? R. El archivo final mide 2000×840 píxeles, que es exactamente cuatro veces la proporción oficial de dev.to (1000×420). dev.to reduce la imagen al mostrarla, por lo que el resultado se ve nítido en cualquier pantalla.

P. ¿Por qué la proporción es 1000×420 y no 1200×630 como en Twitter? R. Cada plataforma usa una proporción distinta para su tarjeta de previsualización. dev.to renderiza la portada en el feed con una relación cercana a 1000×420, y este generador respeta exactamente esa medida para que tu artículo se vea correctamente al compartirlo.

P. ¿Qué ocurre si el título es demasiado largo? R. El título se ajusta automáticamente a dos líneas y, si aun así no cabe, se trunca con «...». La etiqueta y el nombre del autor se recortan a una sola línea. No hay forma de romper el diseño desde el campo de entrada.

P. ¿Puedo añadir mi propio color HEX? R. No. La herramienta ofrece solo cuatro colores: rosa, cian, menta y ámbar. Limitar la paleta es intencional: en miniaturas pequeñas, los colores con buen contraste sobre fondo blanco funcionan mejor, y reducir las opciones evita perder tiempo decidiendo.

P. ¿Cómo añado el PNG a mi artículo en dev.to? R. Sube el archivo a un host (GitHub raw, un servicio de imágenes, tu propio servidor) y añade cover_image: con la URL en la cabecera Markdown de tu artículo. También puedes subirlo directamente desde el control de portada del editor de dev.to.

P. ¿Para qué sirve el botón Reiniciar? R. Devuelve todos los campos al ejemplo inicial en español. Es útil cuando quieres empezar otra portada desde cero sin tener que borrar manualmente cada campo.

📚 Por qué las portadas tipográficas funcionan mejor que las generadas por IA, por ahora

El editor de dev.to incluye una opción de generación de portadas con IA. El problema es una limitación conocida de los generadores de imágenes actuales: renderizar texto preciso dentro de la imagen sigue siendo difícil. Las letras salen distorsionadas, las palabras vienen mal escritas o la tipografía no coincide con el tema técnico del artículo.

Un flujo que la comunidad de dev.to comparte a veces es usar la IA para el fondo y luego superponer el titular con una herramienta separada — HTML, SVG, Figma o un generador de portadas dedicado. Esta herramienta lleva esa idea al extremo: salta por completo el fondo generado por IA, deja solo la tipografía y un color de acento, y produce una portada en la proporción nativa 1000×420 de dev.to con un solo clic.

Las restricciones son justamente el punto: tres campos de texto, cuatro colores, un clic. La portada queda consistente entre artículos, está lista en segundos, y el texto que aparece es el texto que escribiste — no el texto que adivinó un modelo.