Favicon - Docs de MetricSpot

Q: ¿Por qué no se muestra mi favicon en los resultados de Google?

Tres causas habituales: 1. La URL devuelve 404 o 403 — comprueba con curl -I https://yoursite.com/favicon.ico. 2. El icono es demasiado pequeño (menos de 8×8) — genera un ICO multi-resolución a 16, 32 y 48. 3. Google no ha rerrastreado el sitio desde que lo añadiste — espera hasta una semana, o solicita indexación en Search Console.

Qué comprueba esta verificación

Busca en <head> un <link rel="icon"> o <link rel="shortcut icon"> (o, como fallback, un /favicon.ico en la raíz del dominio) y verifica que el archivo referenciado carga.

Por qué importa

Tres sitios usan tu favicon, todos de cara al usuario:

Barras de pestañas y marcadores del navegador — identificación visual instantánea cuando el usuario tiene 30 pestañas abiertas.
Resultados de búsqueda de Google — Google muestra el favicon junto al nombre del sitio en las SERPs móviles, y cada vez más en escritorio. Los sitios sin favicon muestran un icono genérico de globo, que parece sin terminar junto a la competencia.
Historial del navegador, descargas, switcher de apps del SO — cualquier sitio donde el SO o el navegador cachee la identidad de tu sitio.

No tener favicon es el equivalente visual de mandar una carta sin remite. El sitio sigue funcionando; simplemente no parece serio.

Cómo arreglarlo

Envía dos archivos de icono y enlázalos bien:

1. El clásico .ico — para navegadores heredados y la ruta de auto-detección.

Colócalo en la raíz del dominio:

public/favicon.ico   (ICO multi-resolución de 16×16, 32×32)

La mayoría de navegadores hacen auto-fetch de /favicon.ico incluso sin etiqueta <link>, pero ser explícito es mejor.

2. Un icono SVG — para navegadores modernos, escala a cualquier tamaño.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

El navegador elige el que prefiera (Chrome y Firefox prefieren SVG; Safari cae al ICO).

3. Uso PWA / icono grande — combínalo con apple-touch-icon y el manifest web.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">  <!-- 180×180 -->
<link rel="manifest" href="/site.webmanifest">

Mira las verificaciones Apple touch icon y manifest de aplicación web.

Bloque head completo:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Eso es todo lo que necesitan la mayoría de sitios.

Genera todo el set desde una sola fuente:

RealFaviconGenerator coge una imagen fuente (idealmente SVG o un PNG de 512×512) y produce toda la familia de iconos más el HTML para pegar. Cubre iOS, Android, tiles de Windows e instalabilidad PWA.

Astro: mete los archivos en public/ y enlázalos en el <head> de tu layout. Astro ya configura el link rel="icon" desde astro:assets si lo usas.

Next.js (App Router): pon favicon.ico y opcionalmente icon.svg directamente en app/. El framework auto-inyecta las etiquetas <link>.

app/
  favicon.ico       # auto-enlazado
  icon.svg          # opcional, auto-enlazado
  apple-icon.png    # opcional, 180×180, auto-enlazado

WordPress: Apariencia → Personalizar → Identidad del sitio tiene un cargador “Icono del sitio”. WordPress genera y enlaza el set completo automáticamente.

Notas de diseño:

Usa un diseño cuadrado. Los navegadores recortan a cuadrado de todas formas.
Alto contraste — los favicons se muestran a 16×16 en las barras de pestañas, donde el detalle fino desaparece.
Pruébalo en modo oscuro. Un logo sobre fondo transparente que funcionaba en blanco puede volverse invisible en barras de pestañas oscuras.

Requisitos del favicon en SERP de Google:

Google tiene reglas adicionales para el favicon en SERP — cuadrado, al menos 8×8 y con URL estable. Los sitios que rotan la URL de su favicon en cada deploy pueden aparecer con un globo en Google. Usa un nombre de archivo estable y nunca lo pongas con query string.

Preguntas frecuentes

¿Necesito `.ico` o basta con SVG?

Ambos, por ahora. SVG es el futuro, ICO es el presente — Safari y algunas versiones antiguas de Chrome siguen prefiriendo ICO para la barra de pestañas. Hasta 2027 o por ahí, envía los dos.

¿Por qué no se muestra mi favicon en los resultados de Google?

Tres causas habituales:

La URL devuelve 404 o 403 — comprueba con curl -I https://yoursite.com/favicon.ico.
El icono es demasiado pequeño (menos de 8×8) — genera un ICO multi-resolución a 16, 32 y 48.
Google no ha rerrastreado el sitio desde que lo añadiste — espera hasta una semana, o solicita indexación en Search Console.

¿Y el truco de favicon claro/oscuro?

Los navegadores modernos soportan iconos SVG con media-query:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml">

O embebe ambos en un mismo SVG con una etiqueta <style> usando prefers-color-scheme. Cualquiera funciona; el segundo es una petición HTTP menos.