Tal vez has llegado aquí buscando qué son esos errores 404 de Apple-touch-icon. Bueno, eso simplemente es que cuando alguna persona añade un acceso directo a nuestra web en su teléfono Apple, el sistema busca los íconos de nuestra web, para colocar los accesos directos, al no encontrarlos se producen los registros 404.

Para dispositivos Apple iOS como iPod Touch, iPhone y iPad, así como algunos dispositivos Android, se pueden crear iconos personalizados que se muestre en sus pantallas, al momento de «Agregar a la pantalla de inicio».

Qué son los  los iconos táctiles de Apple

Similar al Favicon, apple-touch-icon.png es un archivo utilizado para el icono de una página web en el iPhone, iPod Touch e iPad de Apple.

Cuando alguien marca tu página web o agrega tu página web a su pantalla de inicio, se usa este icono. Si no se encuentra este archivo, estos productos de Apple utilizarán la captura de pantalla de la página web, que a menudo no parece más que un cuadrado blanco.

Estos íconos tienen varias dimensiones:

• 57×57 (iPhone),
• 72×72 (iPad),
• 114×114 (iPhone Retina)
• y 144×144 (iPad Retina).

Estos deben almacenarse en el directorio de inicio de tus sitios web, a menos que la ruta se especifique en el HTML.

¿Cómo crear los Apple-touch-icon para mi web?

Para resolver esto de manera rápida y sencilla existen unos generadores de iconos, entre ellos recomiendo el que yo uso: iconifier.net

Es tan sencillo de usar como que le das la imagen en alta resolución, 512×512 pixeles. Presionas el botón «iconify» y te genera un zip con todas las imágenes ya listas en todos los tamaños para subirlos a la raíz de tu sitio web.

Luego de eso solo queda pegar el HTML en el Header

La mayoría de los navegadores encontrarán los íconos de favicon y Apple en la carpeta raíz de tu sitio web. Agrega el siguiente HTML a tu página web.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />

Copia el código html y pégalo en el header de tu web, para eso existen varios plugins, puedes también editar tu archivo header.php en la carpeta de tu plantilla o utilizar un code snippet para introducir meta etiquetas en el Header.

Espero que te haya servido de utilidad este post.