ℹ Info General

Falta el favicon 32x32 — Iconos nítidos en las pestañas del navegador

Un favicon PNG de 32x32 proporciona iconos nítidos en las pestañas del navegador.

¿Cuál es el problema?

Tu sitio no tiene un favicon PNG de 32x32 píxeles. Aunque tengas un favicon básico .ico, proporcionar un PNG dedicado de 32x32 garantiza el icono más nítido posible en las pestañas del navegador y otros elementos de la interfaz.

Por qué importa el tamaño 32x32

Pantallas de alta resolución — Las pantallas modernas usan densidad de píxeles 2x; 32x32 se ve nítido al tamaño mostrado de 16x16
Barra de marcadores — Muchos navegadores renderizan los favicons a 32x32 en la barra de marcadores
Cambio entre pestañas — En algunas barras de tareas del sistema operativo, los favicons se muestran a tamaños más grandes
Menús contextuales — Los menús del botón derecho pueden mostrar la versión de 32x32

Cómo solucionarlo

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

Configuración completa de favicons

Para la mejor compatibilidad entre navegadores:

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

<!-- PNG 32x32 (pestañas en pantallas de alta resolución) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

<!-- PNG 16x16 (pestañas estándar del navegador) -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- ICO de respaldo (navegadores antiguos) -->
<link rel="icon" href="/favicon.ico" sizes="any" />

Cómo crear un favicon de 32x32

Empieza en grande — Diseña a 512x512 o 256x256
Exporta a 32x32 — Usa Figma, Photoshop o una herramienta en línea
Comprueba la claridad — Asegúrate de que sea reconocible a tamaño pequeño
Usa formato PNG — Para bordes nítidos y soporte de transparencia

Verifica tus etiquetas Open Graph

Artículos relacionados

og:image rota

La URL de og:image no devuelve una imagen válida. Las plataformas sociales mostrarán una vista previa rota o vacía.

La URL canónica difiere de la URL de la página

La URL canónica apunta a una URL diferente a la de la página actual.

El charset no es la primera etiqueta meta

La declaración de charset debería ser el primer elemento dentro de <head>.

og:description podría ser más larga

Tienes espacio para una descripción más detallada que aumente la interacción.

og:description contiene una URL

La og:description debería ser un resumen legible, no una URL.

Keyword stuffing en og:description

Repetir las mismas palabras excesivamente en la descripción se percibe como spam.

Servidor MCP de OpenGraph

Inspecciona tags OG directamente desde tu editor

El servidor MCP de OpenGraph te permite inspeccionar y analizar meta tags Open Graph directamente desde tu editor con IA o asistente. Proporciona dos herramientas:

inspect_og — Obtener y puntuar tags OG de cualquier URL
suggest_og_tags — Generar HTML de meta tags recomendados

Agrega el servidor al archivo .cursor/mcp.json de tu proyecto:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicia Cursor después de agregar la configuración.

Agrega a tu archivo .vscode/mcp.json (requiere extensión GitHub Copilot):

{
  "servers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Asegúrate de tener GitHub Copilot con soporte MCP habilitado.

Agrega a tu archivo claude_desktop_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

El archivo de configuración está en ~/Library/Application Support/Claude/claude_desktop_config.json en macOS o %APPDATA%\Claude\claude_desktop_config.json en Windows.

Agrega a tu archivo ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicia Windsurf después de modificar la configuración.

Agrega a tu settings.json de Zed bajo context_servers:

{
  "context_servers": {
    "opengraph": {
      "command": {
        "path": "npx",
        "args": ["-y", "opengraph-mcp"]
      }
    }
  }
}

Abre ajustes con Cmd+, y agrega la configuración.

Ejemplos de uso

▶ "Inspecciona los tags OG de github.com"

▶ "Sugiere meta tags OG para mi sitio web https://example.com"

▶ "Verifica si mi blog tiene etiquetas Open Graph correctas"