ℹ Info General

Missing 32x32 Favicon — Crisp Icons in Browser Tabs

A 32x32 PNG favicon provides crisp icons in browser tabs.

What's the issue?

Your site doesn't have a 32x32 pixel PNG favicon. While you may have a basic .ico favicon, providing a dedicated 32x32 PNG ensures the sharpest possible icon in browser tabs and other UI elements.

Why 32x32 matters

High-DPI displays — Modern screens use 2x pixel density; 32x32 appears crisp at the displayed 16x16 size
Bookmarks bar — Many browsers render favicons at 32x32 in the bookmarks bar
Tab switching — On some OS task bars, favicons are shown at larger sizes
Right-click menus — Context menus may display the 32x32 version

How to fix it

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

Complete favicon setup

For best cross-browser support:

<!-- SVG (scalable, modern browsers) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<!-- 32x32 PNG (high-DPI browser tabs) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

<!-- 16x16 PNG (standard browser tabs) -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- ICO fallback (legacy browsers) -->
<link rel="icon" href="/favicon.ico" sizes="any" />

Creating a 32x32 favicon

Start large — Design at 512x512 or 256x256
Export at 32x32 — Use Figma, Photoshop, or an online tool
Check clarity — Ensure it's still recognizable at small size
Use PNG format — For crisp edges and transparency support

Check your Open Graph tags

Related articles

Missing og:title

The og:title tag is essential for social sharing. Without it, platforms will use the page title or URL.

og:title Is Too Long

Titles longer than 60 characters may be truncated on social platforms.

og:title Is Too Short

Short titles may not be descriptive enough for social sharing.

Missing og:description

The og:description tag provides a summary of the page content for social platforms.

og:description Is Too Long

Descriptions over 160 characters may be truncated on social platforms.

og:description Is Too Short

Short descriptions miss the opportunity to engage users.

OpenGraph MCP Server

Inspect OG tags directly from your editor

The OpenGraph MCP server lets you inspect and analyze Open Graph meta tags directly from your AI-powered editor or assistant. It provides two tools:

inspect_og — Fetch and score OG tags for any URL
suggest_og_tags — Generate recommended meta tag HTML

Add the server to your project's .cursor/mcp.json file:

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

Restart Cursor after adding the configuration.

Add to your .vscode/mcp.json file (requires GitHub Copilot extension):

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

Make sure you have GitHub Copilot with MCP support enabled.

Add to your claude_desktop_config.json file:

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

The config file is at ~/Library/Application Support/Claude/claude_desktop_config.json on macOS or %APPDATA%\Claude\claude_desktop_config.json on Windows.

Add to your ~/.codeium/windsurf/mcp_config.json file:

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

Restart Windsurf after modifying the configuration.

Add to your Zed settings.json under context_servers:

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

Open settings with Cmd+, and add the configuration.

Usage examples

▶ "Inspect the OG tags of github.com"

▶ "Suggest OG meta tags for my website https://example.com"

▶ "Check if my blog post has proper Open Graph tags"