apple-touch-icon (1)

Como crear apple-touch-icon.png y solucionar 404

Posiblemente en los últimos meses te hayas percatado de que en tus logs ha aumentado el número de páginas no encontradas 404 debido a la solicitud de un pequeño archivo de imágen, el apple-touch-icon.png. Vamos a ver qué es esta imágen y como solucionar el problema.

Este error viene simplemente por que los usuarios de iOS navegan con Safari, y estas versiones del navegador buscan en las páginas que entran una imágen .png para utilizarla como icono en sus menús. Parece una tontería pero puede ser un dolor de cabeza.

Solucionar apple-touch-icon.png not found

Para quitar estos errores del log tenemos dos opciones. O bien creamos una redirección de esa imágen a donde queramos, cosa no recomendable, o bien creamos una imágen en png que simbolize nuestra página web.

Con cualquier software para edición de imágen, incluso el paint si es menester, crearemos una imágen de 57×57 píxeles. Recomiendo que sea similar al favicon de vuestra web para unificar el diseño sobre todas las plataformas. Puedes ver qué es un favicon y como crearlo para tu web aquí.

Una vez tengamos creada la imágen del tamaño correspondiente simplemente tendremos que guardarla con el nombre apple-touch-icon.png y subirla al root de nuestra web, es decir en el directorio raiz donde está el index.php y demás.

Por el diseño no hay que preocuparse, ya que el mismo teléfono le dará el toque iOS a la imágen redondeando los bordes y haciendo los relieves y demás, por lo que esa faena nos la quitamos. En caso de que queramos poner un diseño exacto para nuestra imágen tendremos que guardarla y subirla como apple-touch-icon-precomposed.png. De esta forma cogerá esta última imágen que no modifica ni da estilos al cargarla, por lo que se mostrará exactamente como la hayamos creado.

Léete también  Qué es la desautorización de enlaces, y para qué sirve

En el supuesto de que no queramos llamar la imágen así, o incluso que nos moleste que esté en la ruta raíz de nuestro sitio no hay que preocuparse, pues será tan simple como ponerle el nombre que queramos, guardarla en la carpeta que mejor nos parezca, y añadir en el header de nuestra web la siguiente línea:

<link rel="apple-touch-icon" href="/imagenes/icono-iphone.png"/>

Junto a las hojas de estilo y demás en la zona head. De esta forma Safari mirará ahí la imágen en lugar de suponer que es la ubicación predeterminada.


AYUDANOS a poder seguir dando respuestas. Te podemos echar una mano y tú también a nosotros, símplemente dale a me gusta.