Hace un tiempo ya comentamos cómo añadir nuestras páginas favoritas a nuestro Springboard (Springboard es la pantalla de inicio del iPhone, dónde tenemos los iconos); pues bien ahora os voy a mostrar cómo personalizar estos iconos.
Para aquellos que no usen wordpress (o similares) y que tengan un plugin que ya haga eso, hay una forma muy fácil de personalizar el icono “apple-touch-icon”. Se trata simplemente de pegar en el <head> de nuestro HTML (PHP o similar) estas líneas de código:

<link rel="aple-touch-icon" href="http://nombredominio.com/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="http://nombredominio.com/apple-touch-icon.png" />

Evidentemente se entiende por http://nombredominio.com cómo la ruta de la imagen que queréis usar como icono y apple-touch-icon.png el nombre del icono y su extensión. No hace falta que se llame así: apple-touch-icon.png, pero en rel=”aple-touch-icon” sí!

Otra cosa a tener en cuenta es el icono. Se trata de una imagen en formato png, ¡¡¡IMPORTANTE!!! Hasta ahora se había dicho que la imagen debía hacer 57x57px pero con la llegada del iPhone 4 hemos descubierto que al tener el doble de resolución, vale la pena ponerlo a 114x114px. Sin embargo lo que hace apple es escalar la imagen hasta ajustarla así que lo máximo que os podría pasar es que se os viera pixelada.

Para ver un ejemplo añadid esta página a vuestro iPhone o cualquiera de mis otras páginas