Cómo crear iconos para webs en dispositivos con iOS

Ramón Rautenstrauch 12 julio 2011 Curiosidades y varios Comentarios desactivados en Cómo crear iconos para webs en dispositivos con iOS

Cada vez más personas navegan utilizando dispositivos iOS (Apple iPhone y Apple iPad), por lo que crear páginas web y aplicaciones diseñadas para ellos cada vez es mejor idea. Pero no solo es importante ver si la página web se ve correctamente en estos dispositivos, sino también que los iconos de acceso directo desde el escritorio del móvil sean atractivos.

Los tamaños de los iconos para el iPhone 4 y la última generación de iPod Touch son 114px x 114px; para iPad son 72px x 72px; todos los otros dispositivos iOS: 52px x 57px. En todos los casos la resolución correcta es 72dpi. Si no se crea una imagen personalizada para cada dispositivo, se escalará la que exista.

Por defecto el dispositivo iOS le añade esquinas redondeadas, una sobra y un reflejo a todos los iconos. Si preferimos añadirle nuestros propios efectos, hay que añadir -precomposed al nombre del archivo de icono.

apple-touch-icon.png (cualquier dimensión, se escala, resolución: 72dpi, para cualquier dispositivo, se le añaden efectos por iOS).
apple-touch-icon-precomposed.png (cualquier dimensión, se escala, resolución: 72dpi, para cualquier dispositivo, no se le añaden efectos por iOS).
apple-touch-icon-57×57.png (dimensión 57px x 57px, resolución: 72dpi, para cualquier dispositivo, se le añaden efectos por iOS).
apple-touch-icon-57×57-precomposed.png (dimensión 57px x 57px, resolución: 72dpi, para cualquier dispositivo, no se le añaden efectos por iOS).
apple-touch-icon-72×72.png (dimensión 72px x 72px, resolución: 72dpi, para cualquier dispositivo, se le añaden efectos por iOS).
apple-touch-icon-72×72-precomposed.png (dimensión 72px x 72px, resolución: 72dpi, para cualquier dispositivo, no se le añaden efectos por iOS).
apple-touch-icon-114×114.png (dimensión 114px x 114px, resolución: 72dpi, para cualquier dispositivo, se le añaden efectos por iOS).
apple-touch-icon-114×114-precomposed.png (dimensión 114px x 114px, resolución: 72dpi, para cualquier dispositivo, no se le añaden efectos por iOS).

¿Cómo añadir los iconos a una página web?
Si se va a utilizar una imagen / conjunto de imágenes con distintos tamaños para toda la web, solo hay que copiar las imágenes al directorio raiz de la web. Por otro lado, si queremos añadir distintos iconos para distintas páginas dentro de la web, hay que incluir en el encabezado de las páginas (sección HEAD) un enlace a las mismas:

<link rel=»apple-touch-icon» href=»/your-custom-icon.png»/>

También funciona para especificar iconos para distintos dispositivos (pero hay que incluir también su tamaños):

De esta forma al crear un enlace directo a la web en el escritorio de un iPhone o un iPad, en vez de utilizar la miniatura de la página, se usarán estos iconos, haciéndo el enlace mucho más atractivo.