Cómo poner un favicon en HTML

Código listo para pegar en el head para añadir favicon.ico y favicons PNG. Consejos para evitar caché y errores.

El código recomendado

Este es el conjunto típico (ICO + PNG). Mantén las rutas en la raíz para que sea simple:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">

Errores comunes

  • La ruta apunta a un archivo que no existe.
  • El navegador sigue mostrando el icono antiguo por caché.
  • El favicon es muy detallado y no se reconoce en 16×16.

Cómo forzar a que se actualice

Si cambias el favicon y no se actualiza, prueba a limpiar caché o a renombrar el archivo (por ejemplo favicon-v2.ico) y actualiza la ruta en el HTML.

Herramientas relacionadas