Apuntes sobre favicons

Guía · 3 min de lectura

Por qué tu favicon no se actualiza y cómo forzarlo

Cambiaste el favicon, desplegaste, recargaste... y el antiguo sigue ahí. Es la queja sobre favicons más habitual de todas, y casi nunca es un problema de código. Los navegadores guardan los favicons en caché de forma mucho más agresiva que las páginas o las imágenes, y la caché de favicons suele sobrevivir a una recarga normal.

Resuélvelo en este orden:

• Recarga forzada. Ctrl+Shift+R (Windows) o Cmd+Shift+R (Mac) recarga saltándose la caché de la página.
• Vuelve a abrir la pestaña. La caché de favicons suele estar ligada a la pestaña abierta. Ciérrala por completo y abre una nueva.
• Rómpela con un parámetro. Apunta el link a una URL «nueva» mientras pruebas: <link rel="icon" href="/favicon.ico?v=2">. Sube el número en cada cambio.
• Confirma que el archivo está de verdad ahí. Carga yourdomain.com/favicon.ico directamente; si da un 404, el navegador está mostrando un icono en caché de un archivo que ya no existe.

Google Search es un caso aparte. Guarda tu favicon en caché de forma independiente de tus páginas y se actualiza según el calendario de Google, así que un icono nuevo en los resultados de búsqueda puede retrasarse días o semanas aunque tu sitio ya sea correcto. No hay ningún botón para acelerarlo: asegúrate de que /favicon.ico devuelve 200 a Googlebot y espera.

Opinión · 4 min de lectura

Deja de generar 20 archivos de favicon: el conjunto mínimo de 2026

Muchas herramientas de favicon todavía te entregan un ZIP con dieciséis PNG, un browserconfig.xml e imágenes de mosaico de Microsoft. Casi todo es peso muerto. Los mosaicos de Windows se retiraron con la interfaz de Live Tiles; el montón de tamaños PNG intermedios resolvía un problema de navegador que ya no existe.

Este es el conjunto que cubre todo lo que se usa hoy en día:

• favicon.ico: multitamaño (16/32/48), para navegadores antiguos y Google Search.
• icon.svg: un archivo escalable que prefieren los navegadores modernos, capaz de modo oscuro.
• apple-touch-icon.png: de 180×180 para las pantallas de inicio de iOS.
• PNG android-chrome-192 y -512: referenciados desde tu web app manifest para Android y las PWA.

Cinco archivos, cuatro referencias de <link>/manifest, listo. Menos archivos significa menos cosas que mantener sincronizadas, un despliegue más ligero y ningún browserconfig.xml obsoleto apuntando a imágenes que borraste. Si una herramienta insiste en que necesitas veinte, está optimizando para parecer minuciosa, no para lo que los navegadores solicitan.

Técnica · 3 min de lectura

Favicons SVG y modo oscuro: un icono que se adapta

Un logo oscuro se ve nítido en una barra de pestañas clara y casi desaparece en una oscura. Publicar dos archivos e intercambiarlos es engorroso. Con un favicon SVG puedes dejar que un único archivo reaccione al tema del navegador, porque el navegador aplica el CSS que hay dentro del SVG al renderizar el icono.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

Referéncialo con <link rel="icon" href="/icon.svg" type="image/svg+xml"> y conserva un favicon.ico sencillo como alternativa: los navegadores antiguos y Google Search no evaluarán la media query, así que también necesitan un icono estático. El resultado: en un sistema claro el glifo es oscuro, en uno oscuro cambia a claro, todo desde un pequeño archivo.