Categorías
HTML5

¿Que es apple-touch-icon.png?

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

Requisitos que tiene que cumplir apple-touch-icon.png

  • El formato en png
  • El ancho y alto del fichero es fijo, los tamaños ha ido aumentado conforme las pantallas han crecido.
  • El nombre del fichero debe llamarse apple-touch-icon.png el propio iphone redondeara las esquinas y le dará el efecto típico de los botones del iPhone, si no deseas que el icono se le apliquen los efectos el iPhone deberás guardarlo con el nombre apple-touch-icon-precomposed.png el teléfono al encontrar este fichero dejara el icono tal cual este.
    NOTA: Aunque esto no es del todo cierto, si no existe la meta el navegador buscara directamente en la raiz del website.

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://tudominio.com/apple-touch-icon.png">

El nombre del archivo puede ser distinto y la ubicación en la web también, si lo especificamos en la ruta de la meta.

Metas apple-touch-icon con tamaños en html

<link rel="apple-touch-icon" href="[rutaarchivo]">
<link rel="apple-touch-icon-precomposed" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="57x57" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="60x60" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="72x72" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="76x76" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="114x114" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="120x120" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="128x128" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="144x144" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="152x152" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="167x167" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="180x180" href="[rutaarchivo]">

Ejemplo de apple-touch-icon utilizado en megazona

Generadores de apple-touch-icon online