Muchísimas personas navegan por internet con dispositivos móviles de Apple y es imprescindible que nuestras páginas estén optimizadas para este fin.
También es importante que nuestra presencia sea la mejor cuando una de estas personas decide guardar la página en sus favoritos o en su escritorio como acceso directo.
Y esto lo logramos con un icono o favicon especial…
Icono para dispositivos Apple
Este es un código especial que debemos incluir en nuestras páginas para que muestre el icono que deseamos.
Los tamaños de 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.
Si sólo tenemos un icono deberá llamarse apple-touch-icon.png.
Si hemos hecho uno para cada dispositivo los nombres tienen que ser:
- apple-touch-icon-57×57.png para el iPhone
- apple-touch-icon-114×114.png para el iPhone 4 alta resolución y posteriores
- apple-touch-icon-72×72.png para el iPad
Al hacer la imagen no necesitamos crear los efectos de sombras y brillos que tienen los iconos hasta el iOS 6, ya que sistema lo hace por nosotros.
Pero existe la posibilidad de especificar que no realice esos efectos y que muestre el icono como nosotros lo hemos creado.
Para ello deberemos modificar el nombre del fichero de esta forma:
- apple-touch-icon-precomposed.png si sólo hacemos el icono por defecto
- apple-touch-icon-57×57-precomposed.png para el iPhone
- apple-touch-icon-114×114-precomposed.png para el iPhone 4 alta resolución y posteriores
- apple-touch-icon-72×72-precomposed.png para el iPad
Para insertar el icono en nuestra pagina y que el mismo se visualice, debemos poner una línea de código en nuestra <head> del documento HTML:
<link rel="apple-touch-icon" href="/nombre-del-icono.png" />
Si lo que queremos es el icono sin efectos:
<link rel="apple-touch-icon-precomposed" href="/nombre-del-icono.png" />
Y si deseamos utilizar los iconos con las dimensiones específicas de cada dispositivo, debemos utilizar el atributo sizes y hacer una imagen por cada medida o dispositivo.
Con efectos:
<link rel="apple-touch-icon" href="/nombre-del-icono.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/nombre-del-icono-iphone4.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/nombre-del-icono-ipad.png" />
Sin efectos:
<link rel="apple-touch-icon-precomposed" href="/nombre-del-icono.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/nombre-del-icono-iphone4.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/nombre-del-icono-ipad.png" />
Si nunca has hecho uno, te recomiendo que empieces agregando un solo icono con la línea:
<link rel="apple-touch-icon" href="/nombre-del-icono.png" />
Luego ve probando las demás variantes.
Saludos!
Cristian
Deja una respuesta