Cómo configurar los íconos táctiles de Apple (Apple-touch-icon)

31

Tal vez haz llegado aquí buscando que 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, 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 íconos personalizados que se muestre en sus pantallas, al momento de «Agregar a la pantalla de inicio».

Qué son los  los íconos 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 dimensioens: 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.

¿Cuántos sitios web siguen la recomendación 152 × 152? 33. Un buen 4%. Oh. Entre ellos, Apple.com.

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

Y ya esto es todo no hay mas nada que hacer. Espero que te haya servido de utilidad este post.

También podría gustarte
Por favor espere, Cargando...
Do NOT follow this link or you will be banned from the site!