El favicon de HTML no se mostrará en google chrome

Estoy creando una página HTML que no está publicada. Una de las cosas que quería hacer era agregar un favicon para que aparezca junto al título. Estoy usando Google Chrome y me di cuenta de que otros sitios web tienen favicons que aparecen junto al mosaico en el navegador, pero el que estoy tratando de mostrar no aparecerá. El sitio está en una carpeta en mi escritorio con nombre de sitio. Este es el código:

         

Como tiene una referencia / en su href, está haciendo referencia a un archivo que estará en la carpeta raíz. En caso de que tenga su página en una carpeta en su computadora, no la esté sirviendo desde un servidor web local, la línea / le indicará al navegador que busque en la carpeta raíz de su sistema de archivos. Entonces, el navegador espera que el archivo esté en C:/favicon.ico o similar, lo que probablemente no sea lo que esperaba.

Si tiene el favicon.ico en la misma carpeta que la página web, puede eliminar la barra diagonal y el icono debería estar visible.

  

Actualizar:

Como opción de depuración, podría intentar agregar una etiqueta que sepa que funciona. Tomé prestado este fragmento de la fuente de StackOverflow. Intente reemplazar su etiqueta de enlace con esto y vea si obtiene el logotipo SO como su favicon.

  

Actualización 2:

Parece que hay un error reportado en Chromium donde el favicon no se muestra si el archivo se carga localmente, sin ser servido a través de un servidor web.

Un problema común donde el favicon no se mostrará cuando se espera que sea caché, si tu .htaccess por ejemplo lee: ExpiresByType image/x-icon "access plus 1 month"

Luego, simplemente agregue un valor aleatorio a su referencia de favicon:

Funciona todo el tiempo para mí incluso con almacenamiento en caché pesado.

Descubrí que (en Chrome 56, OSX) el estado de favicon parece estar almacenado en caché durante toda la vida del navegador, por lo que si no se está cargando un favicon, no lo hará hasta después de reiniciar Chrome . Parece que no aparece en la pestaña “aplicación” en las herramientas de desarrollo y no se borra con una recarga o “Borrar datos del sitio”.

Otra razón por la que Chrome no muestra el favicon es que aún recuerda una hora en que el sitio en cuestión no tenía un favicon o el favicon estaba configurado incorrectamente.

Vas a querer borrar completamente la memoria caché de favicones:

  1. Salga de todos los procesos de Chrome en ejecución.

  2. Elimine el archivo Favicons en su carpeta de datos de usuario. Por ejemplo:

     C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Favicons 

Esto no puede resolverse borrando el caché del navegador, ya que no afecta al contenedor de Favicons .

También tenga en cuenta que, al contrario de lo que podría leer en línea , las solicitudes a los recursos de favicon no se muestran en el panel de red de DevTools. En circunstancias muy excepcionales, una de esas solicitudes puede aparecer allí, pero es muy poco probable y DevTools no lo ayudará a resolver sus problemas de favicon.

1) Despeje su chache. http://support.google.com/chrome/bin/answer.py?hl=es&answer=95582 Y pruebe otro navegador, digamos safari. ¿Cómo importó el favicon?

2) Cómo deberías agregarlo:

Favicon normal:

  

Favicon PNG / GIF:

   

3) Otra cosa podría ser el problema de que Chrome no puede mostrar favicons, si es local (no cargado en un servidor web).

4) Intenta cambiarle el nombre desde favicon.{whatever} {yourfaviconname}.{whatever} favicon.{whatever} a {yourfaviconname}.{whatever} pero te sugiero que aún tengas el favicon normal. Esto ha resuelto mi problema en IE.

5) Encontré otra solución para esto que funciona genial! Simplemente agregué mi favicon como Imagen codificada de Base64 directamente dentro de la etiqueta como esta:

  

Usé esta página aquí para esto: http://www.motobit.com/util/base64-decoder-encoder.asp

No parece que Chrome te permite mostrar el favicon en la barra de direcciones …

http://en.wikipedia.org/wiki/Favicon#Use_of_favicon

También lo he visto hacer así. No sé si marcaría la diferencia o no.

  

Su html es completamente incorrecto para los principiantes, no debería haber un div en su sección de la cabeza, ni después de la sección de su cuerpo. Le sugiero que busque en html correcto primero antes de comenzar a trabajar con favicons, etc.

Este truco funciona: agregue este script en el encabezado o masterPage para Ejemplo

  var link = document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = '/favicon.png'; 

y será almacenado en caché. No es óptimo, pero funciona.

La ruta debe ser a través del URI (completo).

Me gusta: http://example.com/favicon.png

entonces en tu caso:

          

Ref: http://www.w3.org/2005/10/howto-favicon

¡Este problema me estaba volviendo loco! La solución es bastante sencilla en realidad, solo agregue lo siguiente a la etiqueta del encabezado:

  

Por ejemplo:

       

Tenga en cuenta que si tiene tantas tabs abiertas que Google Chrome solo muestra los icons de favoritos, Google Chrome no mostrará el favicon de la pestaña seleccionada, por lo que si continúa cargando la pestaña con su página cargada para ver su nuevo favicón, lo hará solo vea el texto del título de su página.

Deberá volver a cargar su página y luego seleccionar una pestaña diferente para ver su favicon.

enter image description here

Para mí, el problema era que había un div encima (lo que por supuesto debería haber estado en la cabeza, pero sucede). A Firefox no le importó, pero Chrome sí.