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
