Ultimamente en los logs de mi servidor venía encontrando errores 404 (página no encontrada) en dos archivos:
apple-touch-icon.png y apple-touch-icon-precomposed.png
Pero ¿quién los pide y qué son?
Pues son archivos solicitados por el navegador del Iphone (Safari), si los encuentra los utiliza en el menú típico del Iphone y consiste en una imagen en formato «.png».
¿Cómo creo mi propio Apple Touch Icon?
Muy fácil, con cualquier editor de imágenes (Photoshop o Gimp) creas un nueva imagen de 57 x 57 px y le añades los elementos que definan a tu página (el logo, colores corporativos, etc…) y lo guadas como «apple-touch-icon.png«. Tan sólo queda subirlo a la raiz de tu web, al ladito del index. No hay que preocuparse por redondear las esquinas de la imagen o darle el efecto típico de los botones del Iphone, el propio teléfono lo hace al mostrarlo en el menú.
¿Y si quiero darle mi propio efecto?
Igual que en el paso anterior solo que al guardarlo has de hacerlo como «apple-touch-icon-precomposed.png«, de esta manera el Iphone mostará el icono tal cual sin modificarlo ni darle efectos. También puedes poner otro nombre al archivo o guardarlo en otro directorio, para ello añade esta línea de código en el «<head>» de tu página.
<link rel="apple-touch-icon" href="/icono-para-iphone.png"/>
Pingback: Bitacoras.com
Muchas gracias por el aporte lo voy a empezar a implementar en mis webs de aquí en adelante.
Hola,
Tengo un problema y es que únicamente en el ipad no me coge ni la imagen que le pongo especifica para el ipad ni la imagen por defecto que es la general. Pero en los demas dispositivos si me funciona. ¿Sabes porqué puede ser?
Gracias y un saludo!
Saludos… excelente aporte… estaba asustado porque veia accesos a esta pagina y no sabia que era… ya se que debo mas bien poner eso en mi web y estar mas optimizado para los iphone… muchas gracias…