html - transparente - No se puede configurar favicon usando las páginas de Jekyll y Github

icono en html5

Question

Estoy tratando de configurar un favicon.ico para mi página de github, pero no funciona. Cuando lo sirvo localmente, veo el favicon estándar "vacío" y cuando lo presiono, veo el ícono de Facebook. ¿Por que es esto entonces? Tengo el favicon.ico correcto en el directorio raíz de mi proyecto y agregué la línea

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

a la correspondiente default.html . Puede ver las fuentes aquí: https://github.com/drorata/drorata.github.io

Answer 1

Solución rápida

Deje la barra oblicua para que la dirección href sea relativa.

Por ejemplo:

Cambio

<link rel="shortcut icon" type="image/png" href="/favicon.png">

a:

<link rel="shortcut icon" type="image/png" href="favicon.png">

En mi sitio de páginas de Github esto funciona perfectamente.

Explicación

Use mi sitio https://hustlion.github.io/spanish-cards/ como ejemplo:

Cuando utiliza <link rel="shortcut icon" type="image/png" href="/favicon.png"> , la dirección del icono será https://hustlion.github.io/favicon.png , porque la raíz del sitio (según lo especificado por la barra en /favicon.png ) es https://hustlion.github.io/ .

Sin embargo, cuando utiliza <link rel="shortcut icon" type="image/png" href="favicon.png"> , esto es relativo a la ruta https://hustlion.github.io/spanish-cards/ , entonces la dirección del ícono se resolverá correctamente como https://hustlion.github.io/spanish-cards/favicon.png .

Notas

Este problema de ruta ocurre especialmente cuando está utilizando páginas github para su repositorio específico.

Answer 2

Cloné tu proyecto de GitHub para echarle un vistazo. Después de servirlo usando Jekyll, el favicon no se mostró, como notó.

Hice algunas pruebas rápidas convirtiendo el archivo favicon en un archivo .png lugar de un archivo .ico y cambiando la declaración de favicon a lo siguiente, y eso fue capaz de mostrar el favicon.

<link rel="shortcut icon" type="image/png" href="/favicon.png">

Intenté hacer que el favicon funcionara manteniendo el formato de archivo .ico , y al principio no pude hacerlo. Sin embargo, hice una búsqueda rápida y me encontré con esta pregunta, el favicon no se muestra en Firefox .

En esa pregunta, el autor de la pregunta tenía un problema similar con el favicon que no se mostraba, y finalmente pudo llegar a una solución rápida agregando un ? al final del enlace al archivo favicon en la declaración de favicon. Intenté esto y funcionó. Aquí está lo que sería la declaración de favicon:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?">

Cualquiera de esos dos métodos parece ser capaz de solucionar su problema. Personalmente, recomendaría usar el primer método, mediante el cual convierte la imagen a un archivo .png , ya que parece un poco más simple y menos hacky.

Sin embargo, si desea mantener el archivo como un archivo .ico , debe leer la pregunta a la que he vinculado antes de intentar el segundo método, ya que la respuesta aceptada para la pregunta difería de esa solución. Además, no estoy seguro de por qué funciona el segundo método, y parece un poco hacky.

Answer 3

Creo que, actualmente, la forma correcta de hacer esto es:

<link rel="shortcut icon" type="image/png" href="{{ "/favicon.png" | prepend: site.baseurl }}" >

Suponiendo que está utilizando un png. Lo siguiente también funcionó para mí con un .ico en lugar de .png:

<link rel="shortcut icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" >

Estaba trabajando con Chrome en Linux. Ni la respuesta de Excalibur Zero ni la respuesta de Ribtoks funcionaron para mí.

Answer 4

En caso de que alguien esté buscando esto. Ambos enfoques no funcionaron para mí. Pero cuando site.url el site.url , funcionó

# Build settings
markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-seo-tag

Answer 5

En mi caso, tuve que agregar el archivo favicon.ico a la carpeta de activos y hacer referencia a este de la siguiente manera:

<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico">

Answer 6

Lo puse a trabajar usando:

<!-- Add favicon -->
<link rel="shortcut icon" 
      type="image/png" 
      href="{{ ''/favicon.png'' | relative_url }}" >

Notas sobre el fragmento:

1. Formato PNG para el favicon,
2. una URL relativa en la etiqueta de encabezado HTML (en minimia esto es head.html ).
3. Agregar relative_url le dice a Liquid que anteponga la url y la baseurl a la ruta dada.

Answer 7

Nada de lo anterior funcionó para mí, pero los pasos en este video (asumiendo el tema de mínimos) lo hicieron.

1) Agregue el directorio _includes a la raíz de su proyecto

• Terminal: encuentre _includes/head.html escribiendo bundle show minima
• Copie _includes/head.html del buscador en la raíz de su proyecto

2) Modifique _includes/head.html para incluir el enlace favicon

• Lo siguiente funciona para mí: <link rel="shortcut icon" type="image/png" href="/favicon.png">
• Importante: el / delante de /favicon.png importa. Sin el / , la raíz de su sitio web tendrá su favicon pero ningún otro punto final lo tendrá.

3) Agregue el jekyll-seo-tag a su _config.yml . Debería verse más o menos así:

<link rel="shortcut icon" type="image/png" href="{{site.url}}/favicon.png">

Answer 8

de acuerdo con la documentación:

1) coloque el archivo favicon.ico en la carpeta assets/images del proyecto jekyll como assets/images/favicon.ico

2) cree un archivo _includes/head_custom.html si aún no existe

3) agregue el contenido necesario:

<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/assets/images/favicon.ico">

Hecho.

Answer 9

yo suelo

<link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}/images/favicon.ico" >

Y tengo favicon en las images carpeta.