Como crear un icono de tu sitio web para iPhone e iPod Touch

por .

¿Quién no conoce esos hermosos iconos que popularizo tanto el iPhone como el iPod Touch? Lo que muchos no saben es que se puede crear de forma muy simple un botón de nuestro blog o sitio web, para que las personas, que así lo desean, puedan colocarlo de forma automática en su iPhone e iPod Touch y utilizarlo como un acceso directo.

Si no tienes ni un iPhone ni un iPod no te preocupes, no es necesario para hacer este pequeño tutorial, y el resultado será como se ve a continuación en donde se encuentran los iconos de Kabytes y el de Touching Apps.

iconos iphone web

¿Queda lindo verdad? Para el que no lo conoce esto aparece cuando las personas desean añadir nuestro sitio web a la página de inicio del iPhone e iPod Touch.

Bueno, empecemos.

Crear el icono

1. Para esto nos valemos de cualquier editor de imágenes, la imagen debería ser de 100px x 100px en 72 dpi. Es conveniente que los colores estén seteados en RGB.

2. Guardamos la imagen preferentemente en formato PNG que es el que presenta mejor relación peso/calidad, además de ser el recomendado por Apple.

diseno icono

Aclaración importante: No es necesario que nuestro icono tenga la forma del clásico icono de Apple, es decir con puntas redondeadas, podemos hacer una imagen cuadrada y casi de forma mágica el dispositivo le dará la forma y brillo necesario para que no quede fuera de lugar junto a otros iconos.

Subir el icono

3. Ahora basta con subir el archivo con nombre: apple-touch-icon.png todo en minúsculas y exactamente como está escrito. Debemos subirlo al directorio raíz de nuestro servidor, es decir donde encontramos por ejemplo en el caso de tratarse de un blog de WordPress el archivo index.php y wp-config.php entre otros.

Y eso es todo, tremendamente simple y queda muy bien. Esto lo busque durante bastante tiempo en las listas de desarrolladores pero recién hace unos días aprendí a hacerlo gracias a Appleslut

Categorizado en: