Favicon en Hugo: personaliza el icono de tu sitio

Tu sitio Hugo se compila sin errores, pero la pestaña de tu navegador todavía muestra un icono genérico. Normalmente, esto significa que el archivo del icono está fuera de la ruta de assets publicados de Hugo o que el HTML generado nunca lo referencia. Una configuración fiable de Hugo favicon separa los assets de las plantillas: static/ publica los archivos, mientras que un partial de layout añade los elementos <link> que utiliza el navegador.

Requisitos previos

Necesitas un sitio Hugo existente, un logo o icono cuadrado y acceso a sus layouts. Si tu archivo principal está en PNG o SVG, usa Mzu favicondl para preparar un fallback en ICO y conserva el diseño original en la mayor resolución disponible.

Un proyecto Hugo existente
Un icono en SVG y otro en ICO, ambos cuadrados
Acceso a los layouts de tu proyecto y de tu tema

Añade un favicon de Hugo en cuatro pasos

Crea los archivos que se publicarán. Convierte tu diseño en favicon.svg y favicon.ico y coloca ambos en el directorio static/ situado en la raíz de Hugo:
```
static/
  favicon.svg
  favicon.ico
```
Los archivos de static/ se copian tal cual, por lo que Hugo los publica en la raíz del sitio.
Crea un partial reutilizable. Añade layouts/partials/head/favicon.html con este contenido:
```
<link rel='icon' href='{{ "favicon.ico" | relURL }}' sizes='any'>
<link rel='icon' href='{{ "favicon.svg" | relURL }}' type='image/svg+xml'>
```
La especificación HTML define la relación de enlace para iconos. Usamos relURL para que la ruta generada siga el base path de Hugo en lugar de asumir que el sitio está en la raíz del dominio.
Renderiza el partial en <head>. Busca en tu proyecto y en el tema activo el layout que contiene el head del documento. Añade esta línea justo antes de su etiqueta de cierre <head>:
```
<head>
  ...
  {{ partial "head/favicon.html" . }}
</head>
```
Si el archivo pertenece al tema, cópialo primero en la ruta layouts/ equivalente de tu proyecto; de lo contrario, una actualización del tema puede sobrescribir ese cambio. Si el tema ya invoca un partial de favicon, edita ese partial en lugar de añadir un segundo.
Compila, previsualiza e inspecciona. Ejecuta:
```
hugo
hugo server
```
Abre el sitio local e inspecciona el head de la página en las herramientas de desarrollo del navegador. Comprueba que las URLs de los iconos generados devuelven 200 y verifica que public/favicon.svg y public/favicon.ico existan después de la compilación de producción. Para una comparación más amplia de patrones entre frameworks, consulta la guía sobre favicon en static site generators.

Errores comunes

Colocar el icono únicamente en assets/. Ese directorio está destinado a los recursos gestionados por Hugo. Coloca los archivos públicos sin modificar en static/ o procésalos mediante el pipeline de recursos de Hugo.
Hardcodear /favicon.svg. Esto rompe el funcionamiento en sitios desplegados bajo un subpath. Construye la URL con relURL.
Editar únicamente un archivo del theme. Una actualización del theme puede reemplazarlo. Mantén la sobrescritura en tu proyecto siempre que sea posible.
Esperar una actualización inmediata. Los navegadores pueden cachear las URLs de los iconos. Consulta la lista de comprobación para resolver problemas con el favicon si la página publicada sigue mostrando el icono anterior.

Confirma el resultado final

El favicon de Hugo estará listo cuando el head generado contenga ambos elementos link, todos los archivos referenciados devuelvan una respuesta correcta y la pestaña del navegador muestre la marca prevista. Mantén el arte original separado de los archivos generados para que las futuras actualizaciones sigan siendo predecibles.

Requisitos previos

Añade un favicon de Hugo en cuatro pasos

Errores comunes

Confirma el resultado final

Prepara el favicon de tu sitio Hugo