Acabas de subir tu último proyecto a GitHub Pages. El código está limpio, el CSS es responsivo y ese check verde de 'Deployed' te da una satisfacción enorme. Pero de repente, miras la pestaña del navegador y ves ese icono de documento genérico y vacío. Es como llevar un traje a medida con chanclas llenas de barro.

Añadir un github pages favicon es una de esas pequeñas tareas que separan un 'proyecto de fin de semana' de una herramienta profesional. En 2026, los usuarios esperan que tu sitio tenga una identidad visual, especialmente cuando tienen cincuenta pestañas abiertas. Si no encuentran tu icono, probablemente cerrarán la pestaña.

Requisitos para un icono impecable

Antes de tocar una sola línea de código, necesitas una imagen de origen de alta calidad. Siempre recomiendo empezar con un SVG. ¿Por qué? Porque el propio GitHub utiliza SVG para su icónico logo de Octocat. Se escala perfectamente y maneja las transiciones al modo oscuro de maravilla.

Si no estás seguro de qué formatos necesitas, echa un vistazo a nuestra guía sobre ICO vs PNG para entender por qué la combinación de ambos es la estrategia ganadora en 2026.

Paso 1: Genera tus archivos

No te limites a cambiar el nombre de una imagen aleatoria a favicon.ico. Los navegadores modernos son exigentes. Necesitas un conjunto de iconos que cubra escritorio, móviles y pantallas de alta resolución. Te sugiero usar Mzu favicondl para generar el paquete completo: el apple-touch-icon.png, varios PNG de distintos tamaños y el clásico favicon.ico.

Paso 2: Súbelo a tu repositorio

La forma más limpia de organizar esto es crear una carpeta llamada /assets en tu directorio raíz. Suelta allí todos los archivos generados. Aunque técnicamente podrías ponerlos en la raíz, mantener una estructura de archivos organizada es un hábito que agradecerás en el futuro. Si usas Jekyll, asegúrate de que la carpeta no esté siendo ignorada.

Paso 3: Actualiza tu HTML

Ahora, abre tu index.html. Dentro de la etiqueta <head>, debes indicar al navegador dónde están tus nuevos iconos. Aquí es donde la mayoría falla con las rutas. Si tu sitio es usuario.github.io/proyecto/, las rutas deben ser relativas.

<link rel='icon' type='image/x-icon' href='./assets/favicon.ico'>
<link rel='apple-touch-icon' sizes='180x180' href='./assets/apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='./assets/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='./assets/favicon-16x16.png'>

Mi consejo profesional: usa siempre el prefijo ./ para rutas relativas en GitHub Pages. Evita muchos dolores de cabeza cuando el sitio se sirve desde una subcarpeta.

Errores comunes en GitHub Pages

El problema más habitual es que el icono no se actualiza. Esto suele ser culpa de la caché del navegador, que es extremadamente persistente con los favicons. Si te pasa, consulta nuestra guía sobre cómo forzar la limpieza de caché del favicon.

Otro error es la sensibilidad a las mayúsculas. Los servidores de GitHub Pages distinguen entre Favicon.ico y favicon.ico. Mantén todo en minúsculas para evitar errores 404 innecesarios.

Configurar el github pages favicon no es física cuántica, pero hacerlo bien demuestra que te importan los detalles. Dale a tu proyecto el toque final que se merece.