En este tutorial vamos a explicar como crear un icono para dispositivos móviles de Apple como son el Ipad o el Iphone un pequeño detalle, no por ello menos importante, ya que es una forma de mejorar el reconocimiento de nuestro sitio web de cara a la navegación de los usuarios y de mejorar la indexación en los buscadores que lo consideran una optimización para dispositivos móviles.
Desde estos dispositivos cualquier usuario puede añadir el sitio web por el que está navegando a la pantalla de inicio, pero si no tenemos creado un icono agregará una captura de pantalla, algo que no es muy corporativo y que no conseguirá destacarnos entre todas las aplicaciones que el usuario tenga instaladas..
Lo primero que tenemos que hacer es leer las especificaciones técnicas que nos proporciona Apple sobre sus iconos en Developer.apple.com (ver DOCUMENTACIÓN), donde nos proporcionan los distintos tamaños de los iconos para sus dispositivos.
Pulsa sobre la imagen para ampliarla
Vamos a elegir el tamaño de 144 x 144 pixeles para alta resolución en ipad, ya que los demás tamaños al ser inferiores serán creados automáticamente por los dispositivos al igual que los bordes redondeados y los brillos.
1º Paso
En Photoshop creamos un nuevo documento con las siguiente medidas 144 x 144 pixeles que llamaremos “apple-touch-icon”.
( Archivo/nuevo)
2º Paso
Diseñamos nuestro icono y lo guardamos con el formato “.png”, con lo cual tendríamos una imagen llamada “apple-touch-icon.png”.
( Archivo / Guardar para web)
Imagen 144x 144 pixeles
3º Paso
Subimos la imagen al root de nuestro sitio web ( directorio principal) con nuestro programa ftp y ahora cada vez que se añada a la pantalla de inicio nuestro sitio web al usuario le aparecerá el icono personalizado.
Notas:
Si no queremos que Safari añada efectos a nuestro icono tendríamos que llamar a la imagen “apple-touch-icon-precomposed.png”.
Si queremos guardar la imagen en otro directorio diferente al root, tenemos que poner entre las etiquetas <head> … </head> el siguiente código:
<link rel="apple-touch-icon" href="http://www.tupagina.com/directoriodondeguardamoslaimagen/apple-touch-icon.png"/>
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure