Guía para mostrar un favicon (web, móviles y tablets)

Navegando por GitbHub encuentro una muy buena guía para la correcta instalación de un favicon en cualquier dispositivo.

La guía principalmente permite la inserción de un favicon tanto en navegadores como en dispositivos móviles, paso a enumerar los pasos.

guia instalación favicon

Instalación básica:

La forma de mostrar un favicon en la mayoría de los dispositivos es simplemente subir un archivo llamado favicon.ico al directorio raíz de nuestro servidor.

Con simplemente subir un archivo con ese nombre y en ese formato vamos a lograr mostrar un favicon en la mayoría de los navegadores

iOS 2.0+, Android 2.1+ e IE 10 (estilo Metro)

Para los dispositivos que cuenten con iOS 2.0+, Android 2.1 o superior, podemos utilizar:

<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

Para Internet Explorer 10 y su icono estilo Metro:

<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

No olviden reemplazar #FFFFFF por el color que deseado en su sitio.

Para dispositivos Apple

Para lograr mostrar un favicon en distinto tamaño, opción particularmente útil en dispositivos de la manzanita podemos utilizar:

<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed"
 sizes="152x152" href="/path/to/favicon-152.png">

<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed"
 sizes="144x144" href="/path/to/favicon-144.png">

<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed"
 sizes="120x120" href="/path/to/favicon-120.png">

<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed"
 sizes="114x114" href="/path/to/favicon-114.png">

<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed"
 sizes="72x72" href="/path/to/favicon-72.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/path/to/favicon-57.png">

Cuando lo que queremos es tener una representación alternativa del favicon en otra medida:

<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">

Formato y dimensiones:

Para la mayoría de los navegadores alcanza con utilizar una imagen de 16×16 o 32×32 pixeles. En cambio para dispositivos iOS o Android podremos utilizar archivos más complejos con un tamaño de 152x152px.

Tanto en iOS y Android el nombre del archivo que debemos utilizar es favicon-152.png, este archivo se autoescala para los distintos dispositivos.

En la guía original de Gitbhub pueden encontrar una lista completa de tamaños para otros dispositivos junto al nombre del archivo que debemos utilizar para una correcta implementación.

Forzar actualización de Favicon.

Algo que me gusto mucho de la guia propuesta es que brinda varias opciones para actualizar el favicon de un sitio (algo que parece sencillo y a veces por x motivo no pasa).

  • Borrar la cache del navegador.
  • Abrir y cerrar funciona en general con Internet Explorer.
  • Abrir más pestañas si la actual no se refresca.
  • Agregar un parámetro al archivo para forzar la actualización (lo mismo que se suele hacer con archivos CSS)
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />
<link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">

Estos son los principales puntos, en la guia oficial pueden encontrar algunas recomendaciones adicionales.

Categorizado en: