Falta favicon .ico o .png — Google no mostrará tu icono en los resultados

¿Cuál es el problema?

Tu sitio no tiene un favicon .ico o .png. Comprobamos lo siguiente:

• Etiquetas <link rel="icon"> que apunten a archivos .ico o .png
• Un archivo /favicon.ico en tu servidor (la ruta por defecto que comprueban los navegadores)
• Declaraciones de favicon PNG en 16x16 y 32x32

No se encontró ninguno. Sin un favicon .ico o .png, Google no mostrará un icono junto a tu sitio en los resultados de búsqueda, lo que le da un aspecto menos profesional y dificulta su identificación.

Cómo se ve en Google

¿Por qué no SVG?

Aunque los favicons SVG funcionan muy bien en navegadores modernos (escalan perfectamente y soportan modo oscuro), Google no los admite en sus resultados de búsqueda:

Formato	Google	Navegadores
.ico	Soportado	Soportado
.png	Soportado	Soportado
.gif	Soportado	Soportado
.svg	No soportado	Soportado

Esto está documentado en las directrices de favicon de Google. El rastreador e indexador de Google simplemente ignora los favicons SVG.

Cómo solucionarlo

Opción 1: Añadir un archivo /favicon.ico

Coloca un archivo favicon.ico en la raíz de tu sitio. Los navegadores y Google lo encontrarán automáticamente en https://tusitio.com/favicon.ico:

<link rel="icon" href="/favicon.ico" sizes="any" />

Opción 2: Proporcionar múltiples formatos (recomendado)

<!-- Para Google y navegadores antiguos -->
<link rel="icon" href="/favicon.ico" sizes="any" />

<!-- PNG de alta calidad para navegadores modernos -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

<!-- SVG para navegadores modernos (escalable, soporta modo oscuro) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

Requisitos de Google para favicons

Para que tu favicon aparezca en Google, debe cumplir todos estos criterios:

1. Formato: ICO, PNG o GIF (no SVG)
2. Tamaño: Debe ser múltiplo de 48px (por ejemplo, 48x48, 96x96, 144x144)
3. URL: Debe ser rastreable (no bloqueado por robots.txt)
4. Contenido: Debe representar visualmente la marca de tu sitio
5. Apropiado: No debe ser inapropiado ni ofensivo

Cómo generar un archivo .ico

Usando RealFaviconGenerator

Sube tu imagen o SVG y generará todos los formatos necesarios automáticamente.

Usando Sharp (Node.js):

import sharp from 'sharp'

// Generar PNG de 32x32 desde cualquier imagen fuente
await sharp('logo.png')
  .resize(32, 32)
  .png()
  .toFile('favicon-32x32.png')

// Generar 48x48 para Google
await sharp('logo.png')
  .resize(48, 48)
  .png()
  .toFile('favicon-48x48.png')

Usando ImageMagick:

# Convertir a ICO con múltiples tamaños
convert logo.png -define icon:auto-resize=48,32,16 favicon.ico

El stack moderno de favicons

Una configuración completa de favicons debe incluir:

1. favicon.ico — Para Google y navegadores legacy (48x48 o multi-tamaño)
2. favicon-32x32.png — Icono estándar para la pestaña del navegador
3. favicon.svg — Icono escalable con modo oscuro opcional vía CSS prefers-color-scheme
4. apple-touch-icon.png — 180x180 para la pantalla de inicio de iOS

Error común: solo usar SVG

Muchos sitios modernos solo declaran un favicon SVG:

<!-- Esto solo NO es suficiente para Google -->
<link rel="icon" href="/favicon.svg">

Esto funciona en navegadores, pero Google mostrará un icono genérico de globo terráqueo en los resultados de búsqueda en lugar del icono de tu marca. Incluye siempre un .ico o .png como respaldo.