El favicon es un pequeño icono que aparece en la barra de pestañas de los navegadores, justo al lado del título de la página.
¿Qué es un favicon?
El «favorite icon» (abreviado como favicon) es una pequeña imagen que aparece en la barra de direcciones del navegador web, a la izquierda del título de la página.
Puede servir como elemento de reconocimiento de un sitio web y, por tanto, influir también en su facilidad de uso.
¿Cómo puedo añadir el favicon?
El favicon se inserta mediante un elemento-Link en el <head> del documento HTML. Para ello se especifica:
- que se trata de un icono (
rel=icon), - dónde se encuentra el icono (
href=favicon.png), - el tamaño del icono (
size="16x16") - y de que tipo de contentido se trata (
type="image/png")
En el código fuente puede verse así:
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#007c8">En cuanto al rel="manifest", se trata de una entrada que Chrome utiliza en Android. La entrada rel="mask-icon" es específica para el navegador Safari de Apple y determina qué icono debe mostrarse para las pestañas ancladas.
Todas las demás posibilidades de utilización del tipo de enlace «icono», pueden consultarse en el sitio web del organismo responsable, el W3C.
¿Qué formatos y tamaños de imagen puedo utilizar para el favicon?
En nuestro ejemplo anterior tenemos 3 entradas para diferentes favicons con diferentes tamaños y puedes definir muchos más.
Una respuesta detallada a la pregunta de qué tamaños y formatos de archivo utilizar está disponible en Stack Overflow: Favicon Standard – 2018 – svg, ico, png and dimensions?
¿Qué ocurre si el favicon no está disponible?
Si el navegador correspondiente no puede encontrar un favicon, Chrome por ejemplo, muestra un icono de documento vacío. Firefox y Safari, en cambio, no muestran ningún icono:
Hay varias razones posibles por las que no aparece tu favicon:
- El código de la aplicación es defectuoso.
- Tu navegador ha guardado tu página como una página sin favicon.
- La ruta indicada no es correcta.
- Estás utilizando un navegador que solo carga favicons desde determinadas ubicaciones.
- El enlace del favicon no está en el encabezado.
En este último caso, puedes añadir un favicon utilizando el siguiente enlace en la zona del encabezado de la página:
<link rel="shortcut icon" href="posicion del favicon.ico">
Para que Google encuentre y muestre tu favicon, debes seguir estas directrices. Si cambias una URL, pide a Google que vuelva a indexar tu página. Esto puede llevar unos días o semanas. Además, asegúrate de utilizar el formato correcto para tu favicon (un múltiplo de 48 píxeles).
¿Qué ocurre si un favicon no está enlazado?
Google solo mostrará correctamente los favicons en las páginas de resultados si existen enlaces coherentes desde todas las páginas del sitio web. John Müller de Google señaló en un Webmaster Hangout que el favicon debe estar vinculado en cada página. El factor decisivo aquí es la coherencia, no el tipo de enlace. De lo contrario, existe el riesgo de que el favicon no se muestre.
Conclusión sobre el favicon
El favicon ofrece una buena forma de hacer visible tu propio logotipo en el navegador. Por lo tanto, es aconsejable que tu propio logotipo esté disponible como favicon.
También hay proveedores gratuitos en Internet, como Real Favicon Generator, con los que se pueden crear todos los tamaños relevantes (y muchos más) con relativamente poco esfuerzo.
