El Favicon es un pequeño icono que aparece en la barra de pestañas de los navegadores, junto al lado del título de la página.
¿Qué es un Favicon?
El icono de favorito 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 una característica para un mejor reconocimiento de un sitio web y, por lo tanto, también influir en la facilidad de uso de un sitio web.
¿Cómo insertar un Favicon?
El favicon se inserta mediante un elemento-Link en el <head> del documento HTML. A este respecto, se precisa:
- de que se trata de un icono (
rel=icon), - donde 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 cuando se adjuntan pestañas.
Todas las demás posibilidades de utilización del tipo de enlace «icono» se encuentran en la página web de la comisión competente, 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.
En Stack Overflow hay una respuesta detallada a la pregunta de qué tamaños y formatos de archivo se pueden utilizar: Favicon Standard – 2018 – svg, ico, png and dimensions?
¿Qué pasa si no se encuentra un favicon?
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 de favorito:
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 de determinadas ubicaciones.
- El enlace del favicon no está en la cabecera.
Puedes añadir un favicon utilizando el siguiente enlace en la zona de la cabecera de la página:
<link rel="shortcut icon" href="Pfad zum 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é pasa si un favicon no está enlazado?
Los enlaces coherentes de todas las páginas son el requisito previo para que Google muestre el favicon correcto en los resultados de búsqueda. Johannes 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 icono de favorito
El icono de favorito ofrece una buena posibilidad de hacer visible tu propio logotipo en el navegador. Por lo tanto, es aconsejable poner a disposición tu propio logotipo como favicon.
También hay proveedores gratuitos en la red, como el Real Favicon Generator, con el que se pueden crear todos los tamaños relevantes (y muchos más) con relativamente poco esfuerzo.
