Si eres usuario de iPhone o de iPad, te habrás fijado que cuando añades en el escritorio el acceso directo a una web el icono se crea mediante una pequeña imagen capturada del sitio. No queda del todo mal… Sin embargo, en otras ocasiones, aparece un icono diferenciado, con un buen diseño creado ex profeso.
¿Nunca te has preguntado por qué unos sí y otros no? ¿No quieres saber cómo lo hacen? Y, lo más importante de todo: ¿no quieres que cuando alguien añada un acceso directo a tu web en su iPhone o iPad aparezca el icono que tú quieras? Pues hoy vas a aprender a hacerlo: vamos a añadir un Apple Touch Icon a tu WordPress.
Tabla de contenidos
Qué es el Apple Touch Icon
Ya más o menos lo he explicado en la introducción: es ese iconito que aparece en el escritorio de un dispositivo iOS (iPhone y iPad) cuando pones el enlace a una aplicación o a un sitio web.
Por defecto, para los sitios web iOS añade una pequeña captura del sitio. Sin embargo podemos hacer que muestre un icono personalizado, como nosotros lo diseñemos. Vamos a ver cómo hacerlo.
Cómo crear un Apple Touch Icon para tu web
En realidad, crear el icono es bastante sencillo con cualquier herramienta de edición de imágenes, como Photoshop, ya que se trata simplemente de una imagen en formato PNG. Ni siquiera hay que preocuparse en darle ese efecto crystal y con los bordes redondeados: iOS ya se ocupará de eso.
Simplemente debemos tener la precaución de crearla en diferentes tamaños (usando diferentes nombres, claro está), ya que los distintos dispositivos necesitarán una imagen más grande o más pequeña en función de su resolución. Evidentemente, un iPhone Retina no necesitará un icono del mismo tamaño que un iPhone4 para verse bien.
De hecho, si no quieres complicarte la vida, puedes crear uno sólo, llamarlo apple-touch-icon.png y dejarlo en la raíz de la web. Con eso sería suficiente ya que iOS, si no hay nada declarado expresamente, busca ese archivo antes de recurrir al último recurso de crear una captura de la web para ponerla de icono.
Claro que eso es llevar todas las papeletas para que no se vea apropiadamente.
Distintos tamaños para el Apple Touch Icon
Lo correcto es crear diferentes tamaños para que iOS utilice uno u otro en función de las necesidades del dispositivo. Por ejemplo (en píxeles):
- 180×180 para el iPhone Retina
- 167×167 para el iPad Retina
- 152×152 para iPad
- 114×114 para iPhone4
- 72×72 para los primeros iPad
- 58×58 para los iPhone más antiguos
Hay más tamaños, pero no es necesario colocarlos todos: si el tamaño preciso que utiliza un dispositivo concreto no está disponible, iOS utilizará el más pequeño de los que superen ese tamaño. Eso sí, que nunca falte el más grande, el de 180×180, o el icono no se verá correctamente en el iPhone Retina.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Añadir el Apple Touch Icon a tu web
Una vez que ya tenemos creados los iconos, falta indicar a iOS que tiene un surtido de Apple Touch Icons disponibles para nuestra web, qué tamaños tienen y dónde los puede encontrar.
Eso lo haremos añadiendo algunas metaetiquetas en la cabecera de la web (entre las etiquetas HTML <head> y </head>):
Por supuesto, indicando la ruta a los iconos si éstos no están en la raíz de la web.
Poner el Apple Touch Icon en WordPress
Antes de nada, verifica si tu plantilla no está añadiendo ya el icono por ti. Si el theme es de calidad y tú has añadido el favicon a través del personalizador, él ya habrá pensado en eso. Puedes comprobarlo viendo el código fuente (CTRL+u) y buscando la cadena apple o touch.
Si no es así y estás pensando poner esas líneas directamente en el archivo header.php, te has ganado una colleja. Al menos, si lo haces así, que sea utilizando un child theme (tema hijo). Aquí te explico cómo y por qué:
No. La forma correcta de hacerlo es utilizando los hooks de WordPress, en este caso el hook wp_head, que nos permite «enganchar» en la cabecera de WordPress el código que queramos. Así, aunque el theme se actualice o aunque cambies de plantilla (antes o después o harás) tu código seguirá ahí, en la cabecera.
En este caso, la función para hacerlo podría ser:
¿Y dónde poner esa función? Pues si estás pensando en el functions.php te mereces otra colleja. 🙂 No, en serio, utiliza un plugin propio para tus funciones personalizadas. El 99% de las veces no merece la pena tocar la plantilla.
Saludos Enrique, me gustaría hacerte una pregunta sobre este tema, a ver si tú sabes cómo solucionar este asunto.
En una de las páginas que administro utilizo WP Cerber como plugin de seguridad, la verdad es que cumple muy bien su trabajo pero, por alguna razón me bloquea a usuarios que con peticiones de este tipo:
mipagina.com/2019/10/06/el-articulo-de-hoy/apple-touch-icon.png
mipagina.com/2019/10/06/el-articulo-de-hoy/touch-icon-ipad.png
mipagina.com/2019/10/06/el-articulo-de-hoy/touch-icon-ipad-retina.png
mipagina.com/2019/10/06/el-articulo-de-hoy/touch-icon-iphone.png
etc.
imagino que se trata de usuarios que acceden con dispositivos de apple
y también me bloquea accesos a este fichero:
mipagina.com/2019/10/06/el-articulo-de-hoy/mraid.js
he buscado información sobre este último archivo y parece que tiene que ver con la publicidad de Google que no se utiliza en absoluto en la página. Es decir, este fichero no existe en el sitio.
Me gustaría conocer tu sabia opinión, yo no he podido solucionar este problema de, llamémosles así: «falsos positivos».
Gracias por adelantado.
Un cordial saludo
Hola Andrés
Contacta con el soporte del plugin, es quien mejor te puede ayudar.
Un saludo
Lo haré, muchas gracias Enrique.
Un saludo
Gracias Enrique!