Favicon para Jekyll: guía con baseurl

Guía del favicon en Jekyll: añade iconos sin romper el baseurl

Un favicon de Jekyll puede compilarse correctamente y aun así fallar cuando el sitio usa un baseurl: el recurso termina en una ruta anidada, pero el HTML apunta a la raíz del dominio. Mantén los archivos fuente en un directorio estático, genera las URL con Jekyll y revisa el output compilado antes de publicar.

Requisitos previos

• Un proyecto Jekyll con layouts o includes que puedas editar.
• Un SVG cuadrado, un ICO como fallback y, opcionalmente, un PNG de 180×180. Mzu favicondl puede crearlos a partir de una sola imagen.
• Acceso local para ejecutar bundle exec jekyll build.

Añade un favicon a Jekyll en cinco pasos

1. Crea una carpeta de origen permanente

   Añade favicon.svg, favicon.ico y apple-touch-icon.png a assets/images/. No edites nunca _site/; Jekyll vuelve a crear ese directorio durante la siguiente compilación.

2. Añade los enlaces al head del documento

   Abre _includes/head.html de tu tema e inserta estas etiquetas antes de que se cierre el elemento head. Si el tema no tiene ese include, colócalas directamente en _layouts/default.html. Comprueba que el layout siga invocando {% include head.html %}.

   <link rel='icon' type='image/svg+xml' href='{{ '/assets/images/favicon.svg' | relative_url }}'>
   <link rel='icon' sizes='16x16 32x32 48x48' href='{{ '/assets/images/favicon.ico' | relative_url }}'>
   <link rel='apple-touch-icon' sizes='180x180' href='{{ '/assets/images/apple-touch-icon.png' | relative_url }}'>

   La especificación de HTML define rel='icon' para un recurso de icono. Mantener los enlaces en el head permite que el navegador los descubra mientras analiza la página.

3. Genera URLs compatibles con baseurl

   Establece baseurl en _config.yml para que coincida con la ruta de despliegue. Después, haz pasar todas las rutas de los iconos por el filtro relative_url de Jekyll. Este añade como prefijo la ruta base configurada, de modo que la plantilla funciona tanto en la raíz del dominio como bajo una subruta del proyecto. No codifiques de forma fija href='/assets/images/favicon.svg', porque así se ignora esa subruta.

4. Compila e inspecciona el sitio generado

   Ejecuta la compilación y el servidor local:

   bundle exec jekyll build
   bundle exec jekyll serve

   Abre _site/index.html y comprueba que cada enlace incluya la ruta base prevista. Comprueba que los tres archivos existan en _site/assets/images/. Para la previsualización, usa la URL compatible con baseurl que muestra Jekyll en lugar de suponer que el sitio empieza en /.

5. Verifica la respuesta del despliegue

   Tras publicar, inspecciona el código fuente de la página y solicita directamente una URL de icono. La página debe hacer referencia a la ruta desplegada, y la solicitud del icono no debe devolver un 404. Si persiste el icono anterior, renombra el archivo o añade un parámetro de consulta como favicon.svg?v=2. La guía para solucionar problemas del favicon cubre las comprobaciones específicas de la caché.

Problemas habituales

• Editar archivos generados: los cambios en _site/ desaparecen en la siguiente compilación.
• Ignorar baseurl: las rutas relativas a la raíz pueden solicitar el icono desde una ubicación incorrecta.
• Mantener enlaces duplicados: el icono del theme y el icono personalizado pueden competir. Elimina del head final el enlace que no quieras incluir.
• Colocar el marcado en el body: mueve los enlaces al include o layout del head.

Conclusión

Con los assets en assets/, los enlaces en tu plantilla de head reutilizable y las URL generadas por relative_url, tu favicon de Jekyll pasará de source a production sin problemas. Para elegir el formato y consultar más ejemplos de etiquetas, lee la guía de favicon en HTML.