¿Qué es apple-touch-icon.png? (IPhone)

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"/>

Esta entrada fue publicada en internet el por .

Acerca de Xose de la Paz

Me apasiona Internet y todo su mundo. Soy afortunado porque desarrollo de forma profesional y experta mi pasión, si bien me considero un autodidacta 'todoterreno'. Compagino mi vocación profesional con otras, como los viajes a través del mundo y el arte de la fotografía.

4 pensamientos en “¿Qué es apple-touch-icon.png? (IPhone)

  1. Pingback: Bitacoras.com

  2. Roberto

    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!

  3. Chavez Cancer

    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…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.