¿Que es apple-touch-icon.png?

Para que sirve el apple-touch-icon.png y el apple-touch-icon-precomposed.png, pues son archivos solicitados por el navegador del iPhone (Safari), si los encuentra los utiliza en el menú típico del Iphone.

Como pongo apple-touch-icon.png en mi web

  • El formato en png
  • El ancho y alto del fichero es de 57x57pixeles
  • El nombre del fichero debe ser exactamente apple-touch-icon.png el propio iphone redondeara las esquinas y le dara el efecto tipico de los botones del iPhone, si no deseas que el icono se le apliquen los efectos el iPhone deveras guardarlo con el nombre apple-touch-icon-precomposed.png el telefono al encontrar este fichero dejara el icono tal cual este.

Una vez creado el fichero y subido a nuestra web deberemos añadir el siguiente meta en el header

<link rel="apple-touch-icon" href="https://s3.cdnpym.es/megazona.com/apple-touch-icon.png">

Otros formatos soportado por iOS

<link rel="apple-touch-icon" href="https://s3.cdnpym.es/megazona.com/apple-touch-icon_114x114.png" />
<link rel="apple-touch-icon" sizes="76x76" href="https://s3.cdnpym.es/megazona.com/apple-touch-icon_76x76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="https://s3.cdnpym.es/megazona.com/apple-touch-icon_114x114.png" />
<link rel="apple-touch-icon" sizes="152x152" href="https://s3.cdnpym.es/megazona.com/apple-touch-icon_152x152.png" />