Tamaño de portada de Facebook: guía completa y perdurable

Resumen inmediato

La medida de referencia para la portada de Facebook es 820 x 312 px en escritorio y 640 x 360 px en móvil, según el Centro de ayuda de Meta. Diseñamos siempre pensando en un area segura central, en exportar a 2x para pantallas retina y en plantillas modificables para agilizar el flujo de trabajo.

Tabla rápida de medidas

• Portada escritorio (display): 820 x 312 px (Centro de ayuda de Meta)
• Portada móvil (display): 640 x 360 px (Centro de ayuda de Meta)
• Versión sugerida para exportar a 2x: 1640 x 624 px para escritorio y 1280 x 720 px para móvil (práctica basada en device pixel ratio)
• Medida histórica usada antes del cambio: 851 x 315 px (cambios documentados en ayuda de Facebook)

Nota: las cifras anteriores provienen de las especificaciones publicadas por Meta y de la práctica de diseñadores que recomiendan exportar al doble de resolución para dispositivos de alta densidad de píxeles. Ver fuentes al final de la nota.

Por qué las medidas oficiales importan, pero no son el final del proceso

Seguir las medidas oficiales es un buen punto de partida. Nos da una referencia para evitar que elementos clave queden cortados o se vean pixelados. Sin embargo, la realidad es que la portada se renderiza de forma diferente según dispositivo, densidad de pantalla y cambios en la interfaz. Por eso recomendamos:

• Empezar por las medidas oficiales de Meta como marco base.
• Diseñar con un area segura central que contenga el logotipo y el texto importante.
• Preparar versiones adaptadas y exportar a 2x para preservar nitidez.

Este enfoque reduce la necesidad de rehacer piezas cada vez que la plataforma ajusta la interfaz.

Historia breve y comparación temporal

Facebook ha ido ajustando sus dimensiones de interfaz a lo largo de los años. Antes de 2014 la guía más recurrente era 851 x 315 px. Con el rediseño de la plataforma se consolidó 820 x 312 px como referencia para escritorio. Esa modificación es un ejemplo de por qué no conviene diseñar con medidas absolutas rígidas: la misma pieza puede necesitar ajustes a lo largo del tiempo. Comparación concreta: la medida anterior 851 x 315 px frente a la actual 820 x 312 px muestra una reducción del ancho efectivo que obliga a revisar áreas seguras y composiciones cuando hay cambios en la interfaz (fuentes: Centro de ayuda de Meta y archivos de ayuda histórica).

Área segura: qué es y cómo definirla

La area segura es la franja del diseño que va a mostrarse con seguridad en la mayoría de dispositivos y resoluciones. Recomendamos colocar ahí el contenido crítico: logotipo, eslogan corto, llamada a la acción textual, rostros en retratos.

Una guía práctica:

• Crear un documento con la medida base de escritorio 820 x 312 px.
• Marcar un rectángulo central que deje al menos 90 px de margen lateral y 40 px de margen superior e inferior como area segura aproximada. Estas cifras buscan equilibrar la visualización entre desktop y móvil y se usan como referencia en plantillas modificables.
• Evitar texto demasiado cercano a los bordes. Si el texto debe ser legible en móvil, asegurarse de que quepa dentro del recuadro central y probarlo en 640 x 360 px.

La idea es que la composición funcione si el usuario ve la portada en desktop, en móvil o en una ventana redimensionada.

Resolución y exportación: por qué usar 2x

Muchos dispositivos modernos usan mayor densidad de píxeles. Si se sube una imagen con la medida exacta 820 x 312 px es probable que se vea ligeramente borrosa en pantallas retina. Exportar a 2x es una práctica estándar en diseño web y móvil para garantizar nitidez.

Recomendación práctica:

• Archivo de trabajo vectorial o raster en alta resolución.
• Exportar versión para subir: 1640 x 624 px para la portada de escritorio (2x de 820 x 312).
• Mantener la proporción para la versión móvil si se decide exportar por separado: 1280 x 720 px para 640 x 360 px (2x).

Esta práctica se basa en la recomendación general sobre device pixel ratio que adoptan las guías de diseño de plataformas y motores de navegador.

Tipos de archivo y compresión

• PNG para gráficos con áreas planas, texto o logo con transparencia.
• JPG para fotografías o imágenes con degradados suaves.
• WebP si la plataforma lo acepta y se busca mejor compresión con calidad preservada.

Comprimir sin perder legibilidad. Para fotografías con mucho detalle, mantener una calidad de exportación entre 70 y 85 suele ser un buen compromiso. Revisar la vista previa en móvil y escritorio antes de subir.

Accesibilidad: contraste, texto alternativo y legibilidad

Accesibilidad no es opcional. Para la portada de Facebook conviene:

• Asegurar contraste suficiente entre texto y fondo. Usar herramientas de contraste para comprobar que el texto cumple al menos una ratio de 4.5:1 si es texto normal.
• Evitar tipografías demasiado finas o con trazos pequeños en el area segura, porque en móvil perderán legibilidad.
• Añadir texto alternativo aprovechando la opción que ofrece la plataforma al subir la imagen. Describe la imagen de manera breve y útil para quienes usan lectores de pantalla.

Estas prácticas hacen la pieza usable por más personas y reducen riesgos legales en ciertos contextos profesionales.

Workflow con plantillas: velocidad y consistencia

Las plantillas son esenciales para equipos y proyectos con volumen. Recomendamos:

1. Crear una plantilla base con guías para area segura y capas nombradas (fondo, overlay, logotipo, texto).
2. Mantener versiones en PSD, XD, Figma o Canva según el stack del equipo.
3. Exportar al menos dos salidas: versión principal 2x y versión optimizada para web si hace falta.
4. Documentar la paleta de colores, tipografías y tamaños mínimos en la propia plantilla.

Usar plantillas no es trampa. Es eficiencia coherente con calidad cuando se personalizan correctamente.

Ejemplo paso a paso para una portada efectiva

1. Abrir plantilla 1640 x 624 px con guías para area segura central.
2. Colocar foto de fondo con foco a la izquierda o derecha según la composición; aplicar overlay de baja opacidad si hace falta para mejorar contraste.
3. Insertar logotipo y mensaje corto dentro del area segura.
4. Añadir versiones de prueba: vista en 820 x 312 px y 640 x 360 px.
5. Ajustar tamaño de texto y espaciado para móvil.
6. Exportar PNG o JPG a 2x y subir a la plataforma.
7. Completar texto alternativo y revisar visualización desde un móvil real.

Errores frecuentes y cómo evitarlos

• Colocar texto o elementos importantes cerca del borde sin comprobar el recorte. Solución: always place critical content inside the safe area.
• Subir imágenes con baja resolución. Solución: exportar a 2x y verificar.
• No revisar la versión en móvil. Solución: siempre probar en al menos un teléfono con pantalla común y en escritorio.
• Olvidar el texto alternativo. Solución: crear un checklist de subida que lo incluya.

Herramientas recomendadas

• Figma o Adobe XD para prototipado y plantillas compartibles.
• Canva para equipos que necesitan plantillas rápidas y permisos controlados.
• TinyPNG o Squoosh para compresión sin pérdida apreciable de calidad.
• Contrast checker en línea para comprobar ratios de accesibilidad.

Casos prácticos según objetivo

• Marca personal: priorizar rostro en el area segura y evitar textos largos.
• Empresa: incluir logotipo y claim corto, mantener variedad para campañas cambiantes.
• Evento o campaña temporal: usar plantilla con placeholders para cambiar fechas y CTA sin rehacer composición.

Checklist de subida

• Imagen exportada en 2x según la medida deseada.
• Revisada en vista 820 x 312 px y 640 x 360 px.
• Contraste verificado para legibilidad.
• Texto alternativo completado.
• Archivo optimizado en tamaño y tipo adecuado.

Fuentes y cifras citadas

• Centro de ayuda de Meta, especificaciones de la foto de portada: medidas 820 x 312 px para escritorio y 640 x 360 px para móvil.
• Historial de guías de Facebook, medidas anteriores 851 x 315 px usadas antes de cambios de interfaz.
• Prácticas recomendadas sobre device pixel ratio y exportación a 2x basadas en guías de desarrollo y diseño web contemporáneas, incluidas las recomendaciones de responsive images para pantallas de alta densidad.

Si el lector necesita la URL exacta de alguna de estas fuentes podemos incluirlas en la actualización de la nota. No se inventaron cifras de uso de plataforma en esta columna, porque los recuentos de usuarios cambian con frecuencia y deben citarse con la fecha exacta cuando se mencionan. Esta guía se centra en medidas y prácticas de diseño evergreen.

Conclusión práctica

Recomendamos seguir las medidas oficiales de Meta como punto de partida y priorizar adaptabilidad, accesibilidad y workflows basados en plantillas modificadas. Diseñar pensando en area segura y exportar a 2x reduce trabajo de ajuste y mejora la experiencia en dispositivos actuales. Mantener la plantilla actualizada ante cambios de la plataforma evita rehacer piezas y garantiza coherencia visual.

Fecha de actualización

Actualizado la primera semana de 2026. Revisar el Centro de ayuda de Meta antes de la próxima exportación por si la plataforma realiza cambios en la interfaz.