Guía favicon para todos los dispositivos

Favicon no es más que un icono que se asocia con nuestra web. Muy usado durante años para mostrar un icono al lado del título de la página, que también aparece cuando la añadimos a favoritos.

Para muchos de vosotros es una información que ya conocíais; lo que a lo mejor no conocéis es que ya no vale con solo crear el típico icono de 16x16 o 32x32, ya que esto solo cubre a los navegadores de escritorio. Actualmente existen muchos mas iconos, como por ejemplo los de Apple Touch, los de escritorio de Android o los de escritorio de Windows 8.

Sería muy largo y tedioso explicar cuántos iconos hay que crear y para qué dispositivos: para ello existe la guía favicon-cheat-sheet donde se explican todos los tamaños necesarios y el código que hay que añadir para cubrir la mayoría de dispositivos.

Desde el www.maquetadorweb.com y siguiendo con nuestra costumbre de acortar los tiempos para la creación de sitios web, proponemos Real Favicon Generator que va a generar todo por nosotros. Lo único que vamos a tener en cuenta es la recomendación de usar una imagen con unas dimensiones de 260x260 píxeles.

A continuación ponemos un ejemplo del código autogenerado, que tendremos que colocar en la cabecera de nuestro documento.

También comentaros que las imágenes que se han generado, tenemos que guardarlas en el raíz de nuestro sitio.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.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">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-title" content="www.elmaquetadorweb.com">
<meta name="application-name" content="www.elmaquetadorweb.com">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

Una vez implementado, podemos comprobar nuestro resultado en Favicon Checker