Favicon HTML

La sesión Head construyó una caja de metadatos inicial con charset, viewport, title y un enlace de stylesheet. Un favicon es otro enlace práctico del head: el icono diminuto que aparece en la pestaña del navegador junto al título de la página. Ayuda a reconocer tu sitio entre pestañas abarrotadas, favoritos y algunas listas de historial. No lo dibujas con texto CSS — apuntas al navegador hacia un archivo de imagen pequeño.

Qué es un favicon

Un favicon es un recurso de icono del sitio. Los navegadores lo piden porque tu HTML (o una conjetura por defecto como /favicon.ico) les indica dónde buscar. Las páginas modernas suelen declararlo explícitamente con un elemento link para que la ruta y el tipo de archivo queden claros. El icono debe ser simple y lo bastante cuadrado para leerse a tamaños muy pequeños.

Respuesta directa

En el head del documento, añade un link con rel="icon" y un href que apunte a tu archivo de icono. Opciones habituales: favicon.ico, un PNG como images/favicon.png o un icono SVG. La ruta debe resolverse igual que otras URL relativas (ver Rutas de archivos). Tras cambiar el archivo, espera caché del navegador: un refresco forzoso o una ventana privada suelen mostrar el icono nuevo antes que una recarga normal.

Enlace clásico .ico

Muchos tutoriales siguen empezando con favicon.ico en la misma carpeta que el archivo HTML. El atributo opcional type puede ayudar a los navegadores a entender el recurso.

Lectura del ejemplo clásico

• El link vive en head, junto a title y otros metadatos
• rel="icon" marca el recurso como favicon
• href="favicon.ico" supone que el archivo de icono está junto a esta página HTML
• type="image/x-icon" es una pista MIME habitual para archivos .ico
• Sin una ruta correcta, la pestaña puede conservar un icono por defecto o vacío

Variantes PNG y SVG

Los favicons PNG son fáciles de exportar desde herramientas de diseño. Los favicons SVG se mantienen nítidos a distintas escalas cuando el navegador los admite. Puedes guardar el icono en una carpeta images y apuntar href allí.

Elegir un formato de inicio

• .ico — tradicional, ampliamente reconocido por herramientas antiguas
• .png — sencillo para principiantes que ya exportan activos PNG
• .svg — opción vectorial nítida cuando los navegadores de tu audiencia lo admiten
  No necesitas todos los formatos el primer día. Publica un icono claro con un enlace correcto y amplía después a paquetes apple-touch o de varios tamaños si el proyecto lo exige.

Las rutas importan tanto como el marcado

Si href apunta a un archivo inexistente, la petición del favicon devuelve 404 y el icono de la pestaña falla en silencio. Revisa nombres de carpetas, ortografía y si el archivo HTML se movió sin el icono. Las rutas relativas son relativas a la URL del documento HTML, no a tu intuición de dónde «debería» estar el archivo.

La caché puede ocultar actualizaciones

Los navegadores suelen almacenar favicons de forma agresiva. Cambias favicon.png, recargas y sigues viendo la marca de ayer. Eso no siempre significa que el HTML esté mal. Prueba un refresco forzoso, una ventana privada/incógnito, o renombra temporalmente el archivo y actualiza href para que el navegador pida una URL nueva. Enseña este hábito pronto para que los alumnos no borren marcado que funciona por pánico.

Mantén los iconos pequeños y claros

Una foto enorme comprimida en una pestaña se vuelve un borrón ilegible. Prefiere una marca simple, alto contraste y un lienzo cuadrado. El favicon es una ayuda de reconocimiento, no una segunda imagen hero. Reserva la marca detallada para el cuerpo de la página.

Dónde pertenece el enlace

Coloca los elementos link del favicon en head. Ponerlos en body es el lugar incorrecto para iconos a nivel de documento. Ya sabes que head es para metadatos y enlaces de recursos; los favicons siguen esa regla.

Practica en tu editor

1. Coloca un icono cuadrado pequeño junto a tu archivo HTML o dentro de una carpeta images.
2. Añade <link rel="icon" href="..."> dentro de head con una ruta coincidente.
3. Abre la página y mira la pestaña del navegador junto al texto del título.
4. Rompe la ruta a propósito, recarga y observa cómo el icono desaparece o vuelve atrás — luego corrígela.
5. Sustituye el archivo de icono y, si el antiguo se queda, abre una ventana privada o haz un refresco forzoso para confirmar el arte nuevo.

Errores fáciles

• Poner el link del favicon en body en lugar de head
• href incorrecto de modo que el icono da 404 mientras el HTML de la página sigue viéndose bien
• Esperar una actualización visual inmediata mientras un favicon antiguo está en caché
• Usar una fotografía enorme en lugar de una marca cuadrada pequeña y simple
• Olvidar subir el archivo de icono cuando despliegas solo el HTML
• Confundir rel="stylesheet" con rel="icon" y preguntarte por qué fallan el CSS o el icono de la pestaña

Resumen

• Los favicons se enlazan en head con rel="icon"
• Apunta href a un archivo real .ico, .png o .svg
• Rutas correctas y comprobaciones calmadas de caché resuelven la mayoría de informes de «icono ausente»
• Mantén los iconos pequeños y reconocibles al tamaño de pestaña
• Un enlace que funciona supera un montón de formatos de icono sin usar