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:

app_icon_polsola

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:

app_icon

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

app_icon_precomposed

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

3 comentarios en “Añadir el icono de aplicación de iOS a tu sitio web en WordPress

  1. orietta bock

    18 mayo 2013 el 12:23

    Buen articulo, coloco el código en functions.php pero no me funciona, donde debe ir colocado exactamente para no romper nada?
    Gracias

  2. orietta bock

    18 mayo 2013 el 12:24

    Buen articulo, coloco el código en functions.php pero no me funciona, donde debe ir colocado exactamente para no romper nada?
    Gracias

    • Pol

      21 mayo 2013 el 22:57

      Hola Orietta, puedes poner este código en cualquier parte de tu functions.php, asegurate que tu theme tenga dentro de su header.php el código < ?php wp_head(); ?>, sinó esté código no funcionara, ya me dirás si te funciona 🙂

Deja un comentario