Cómo sabreis, los dispositivos de Apple nos permiten guardar un «acceso directo» a nuestras páginas web favoritas en su escritorio cómo si de una aplicación más se tratara.

El icono de dicho acceso se compone de una captura de la página web en si, pero Apple nos da la posibilidad de definir una imagen personalizada

Creación del icono

Primero de todo vamos a crear la imagen que vamos a utilizar de icono, para hacerlo, si teneis Photoshop os recomiendo la plantilla de  PixelResort, es muy completa y te genera el icono en todos los tamaños necesarios (llegaremos a eso más tarde).

Aquí os dejo el que voy a utilizar yo:

Configuración básica

Para añadir el icono a nuestro WordPress tenemos que añadir el siguiente código a la theme de nuestro functions.php

function ios_app_icon() {
	?>
	<!-- Apple Devices Icons -->
			<link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon.png" rel="apple-touch-icon" />
        <!-- END Apple Devices Icons -->
}
add_action('wp_head','ios_app_icon');

¿Fácil no? Hemos añadido el link a nuestro icono (que se encuentra dentro de la carpeta de imágenes de nuestra theme) en la cabecera de nuestro sitio web.

Mejorando lo básico

Con el código de aquí arriba ya nos basta, pero Apple dispone de varios dispositivos en el mercado y por lo tanto resoluciones distintas, así que si queremos que nuestro icono se vea optimamente en todos ellos lo ideal seria generar 4 imágenes diferentes (Una para cada resolución).

Ahora mismo contemplamos 4 tamaños (57×57, 72×72, 114×114, 144×144) y el nuevo código seria cómo sigue:

function ios_app_icon() {
?>
<!-- Apple Devices Icons -->
	<link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon.png" rel="apple-touch-icon" />
	<link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x72.png" rel="apple-touch-icon" sizes="72x72" />
	<link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x114.png" rel="apple-touch-icon" sizes="114x114" />
	<link href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x144.png" rel="apple-touch-icon" sizes="144x144" />
<!-- END Apple Devices Icons -->
}

add_action('wp_head','ios_app_icon');

En este caso hemos generado 4 links a las 4 imagenes definiendo cual es la que utilizar según el tamaño.

Podeis hacer la prueba, si guardais esta página en el escritorio de vuestro dispositivo iOS os quedará algo parecido a esto:

Precomposed?

Si os fijais, Apple le añade un efecto de brillo encima de nuestro icono, que en algunos casos pueda quedar bien pero si lo preferimos sin hay que añadir la opción «precomposed», el código seria exactamente el mismo, solo añadiendo esto:

<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php bloginfo('template_url'); ?>/img/apple-touch-icon_x144.png" />

Cómo podeis ver el brillo ya no aparece, ahora el icono es tal y cómo nosotro lo hemos creado

Eso es todo por hoy, espero que os haya sido de utilidad ¡Hasta la próxima!