Añadir un icono para iPhone a nuestra web

¿Qué necesitamos?

En principio, solo necesitamos acceso al FTP de nuestra web para subir la imagen. Si se trata por ejemplo de un blog en WordPress bastará con subir una imagen al ftp. En otros casos más avanzados puede hacer falta editar el HTML de nuestra web.

¿Cómo funciona?

Nuestro iPhone buscará un archivo llamado apple-touch-icon.png en el directorio raíz de nuestra web y si lo encuentra lo usará como icono. Para obtener el mejor resultado esta imagen tiene que cumplir estas características:

• Medir 57 x 57 píxeles, con las esquinas cuadradas (si la imagen tiene otro tamaño el iPhone la reescalará)
• Sin efectos de brillo o relieve de botón (el iPhone ya los añade por ti)
• Sin transparencias (el iPhone se encarga de redondear las esquinas)

Aquí tenéis un ejemplo de un icono hecho para un blog:

Como os decía, una vez tengamos nuestro icono listo, solo tenemos que subirlo al directorio principal de nuestra web. Y esto es lo que mostrará el iPhone:

Si por cualquier razón no podemos o no queremos poner el icono en el directorio raíz podemos ponerlo en cualquier otra carpeta y añadir un link en el código HTML de nuestra web como el siguiente:

<link rel="apple-touch-icon" href="/imagenes/apple-touch-icon.png" />

¿Y si queremos usar un icono con nuestros propios brillos?

Si realmente prefieres añadir tu mismo el efecto de brillo y las esquinas redondeadas a tu manera puedes hacerlo! Solo tienes que llamar el icono apple-touch-icon-precomposed.png o bien usar este código en el HTML:

<link rel="apple-touch-icon-precomposed" href="/imagenes/apple-touch-icon-precomposed.png" />

Como veis es muy sencillo y definitivamente merece la pena sobretodo si queremos ofrecer nuestra web también en iPhone.