Si te has percatado de que tu logotipo no se ve tan bien en tu celular como en tu computadora, se debe a que no tienes un Retina Logo.
Para aquellos perfeccionista como yo, que cuidamos hasta el último detalle 😅, les traigo este post donde te enseño cómo hacer que el logotipo de tu página se vea fantástico en pantallas de alta densidad como las de los Smartphone.
Este articulo es valido para el tema Twenty Seventeen de WordPress , aunque puede ser adaptado a una gran cantidad de otros temas.
Contenido del post
¿Qué es una pantalla de alta densidad o retina display?
Este término fue acuñado por Apple para denominar a aquellas pantallas que tienen más pixeles por pulgada, dotándola de mayor densidad, obteniendo así mejores imágenes.
De manera sencilla: lo que hacen en estas pantallas es aglomerar más pixeles en el mismo espacio.
Esto mejora el visionado, logrando imágenes más agradables para el ojo humano.

Las pantallas de alta densidad tienen ya bastante tiempo con nosotros, pero es gracias a la masificación de las conexiones moviles y las previsiones de que supere a las de escritorio, lo que ha hecho que se popularice la búsqueda de un mejor visionado de los elementos web para ellas.
Todos los fabricantes de celulares en la actualidad incluyen este tipo de pantalla de alta densidad en sus mejores teléfonos (y hasta en los de gama baja), por lo que no es un espacio restringido sólo a los dispositivos de Apple.
Al comprender lo anterior, ya entenderás por qué los logo, imágenes, fuente tipográfica o cualquier elemento de nuestra web, se observa mejor en los celulares o en tablets que cuentan con esta tecnología.
¿Cómo hago para que mi logotipo actual sea un retina logo?
Existen básicamente dos técnicas en la actualidad.
La primera es creando un logotipo que sea del doble (2x) de la resolución del que tienes actualmente, para se vea en el mismo espacio de tu logo normal.
De esta manera, al mostrarse en la pantalla del móvil se comprimen los pixeles, creando así un retina logo 😉. ¡Sencillo verdad!
Por ejemplo: si tienes un logo de 210 pixeles de ancho por 50 pixeles de alto (210×50 px), crearemos uno igual, pero con el doble de resolución: 420×100 px, para que este último se adapte según las resoluciones de pantalla.
La segunda forma es creando un logo de vectores, tipo SVG, que reemplazaremos por nuestro logo actual. Los vectores los puedes estirar y encoger sin perder calidad.
Las dos técnicas son validas. La segunda es más flexible y permite hacer uso de las imágenes vectoriales, el cual es una tendencia en el diseño web actual. Entre sus ventajas tenemos:
- Capacidad de adaptarse a las diferentes resoluciones sin perder calidad.
- Bajo peso (megabytes) de las imágenes.
- Permite animaciones.
Creando un logo 2x
Haz un logo que tenga el doble del tamaño de tu logo actual.
Una imagen tiene ancho y alto. Por ejemplo, si tu logotipo tiene 210×50 px, debes redimensionarlo al doble, o sea, a 420×100 px.
Esta redimensión debes hacerlo con un programa de edición de imágenes, o una herramienta online como resizer.
Puedes intentar redimensionar una imagen pequeña a grande, pero es muy posible que se pierda calidad en el proceso.
Los logos es recomendable guardarlos en formato PNG, para que se vean lo mejor posible y no perder detalles. Esta guía sobre optimizar imágenes te puede ayudar.
Te recomiendo te remitas al archivo donde se creó originalmente, en el programa de edición, como photoshop, illustrator, etc. o en su defecto si tienes uno más grande del tamaño requerido, lo achiques, ya que así no se pierde calidad.
Evitando que WordPress recorte tu logo
Es necesario definir el tamaño del logo en WordPress para evitar que WordPress lo recorte, ya que limita el efecto deseado.
Editamos el archivo functions.php de nuestro child theme y agregamos este código al final.
function child_custom_logo_setup() { $args = array( 'height' => 100, 'width' => 420, ); add_theme_support( 'custom-logo', $args ); }
Sustituye los valores de height y width por los valores de alto y ancho de nuestro retina 2x.
Para modificar el archivo functions.php, con el child theme activado, dirígete a: Apariencia > Editor, selecciónalo del menú a la derecha, agrega el código y haz clic al botón Actualizar archivo para guardar los cambios.
Cargando tu retina logo en WordPress
Una vez tengas tu logo 2x súbele a tu WordPress yendo en el administrador a: Medios > Añadir nuevo del menú principal.
Ahora vamos a: Apariencia > Personalizar > Identidad del sitio; con el botón Cambiar logo, selecciónalo de la Biblioteca de medios y le damos clic a Elegir. Luego hacemos clic a la flecha de volver atrás
Ahora nos dirigimos a CSS adicional.
Aquí debes incluir este código CSS en el espacio en blanco, después de la cabecera:
img.custom-logo { max-width: 210px; /* código a modificar */ } @media (max-width: 767px) { img.custom-logo { max-width: 100%; } }
En la primera parte del código le decimos al WordPress que cargue el retina logo al 50% de su tamaño. Aquí debes cambiar 210px por la mitad del ancho del logo que subiste.
En la segunda parte le decimos que en los dispositivos con resoluciones de 767 pixeles o (como los celulares o tablets) menores lo muestre al 100%.
Dicho de otro modo: se verá tu logo como siempre lo has visto en tu computadora de escritorio y tablets, pero en los celulares muestra el retina logo en todo su esplendor 🙌. Esto permite que no se altere el tu diseño de tu página web.
Ejemplo para adaptar el código según el tamaño de tu logo
Si tu logo 2x tiene 300px de ancho, el valor a introducir es de 150px. El código quedaría así:
img.custom-logo { max-width: 150px; /* código a modificar */ } @media (max-width: 767px) { img.custom-logo { max-width: 100%; } }
De esta manera terminamos de agregar nuestro retina logo al tema Twenty Seventeen. Prueba como se observa en tu celular para verificar que todo quedo bien.
Espero tus comentarios, sabes que me encantan 😊. Saludos.

Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.
Hola Diógenes, muy interesante tu articulo, me fue de mucha ayuda.
Estoy utilizando el themes Gnerate Press y cuando accedo a: Apariencia > Personalizar > Identidad del sitio, ya tiene por defecto para agregar el logotipo retina.
¿Es igual de efectivo realizar desde aquí?
Supongo que desde aquí, al igual cómo tu explicaste, la imagen que agregue al logotipo retina deberá ser X2.
Muchas gracias!
Hola Roman.
Con Generatepress es igual de efectivo agregarlo desde el personalizador como mencionas, es una función de base que nos evita hacer lo que explico en el tutorial.
La imagen debe ser X2 o el doble de tamaño.
Saludos.