ℹ Info General

No SVG Favicon Found — Scalable and Dark Mode-Ready Icons

SVG favicons scale perfectly and support dark mode via CSS media queries.

What is an SVG favicon?

An SVG favicon is a vector-based icon that scales perfectly at any size. Unlike PNG or ICO favicons, SVG favicons never get blurry — they're rendered at the exact resolution needed.

Why use SVG favicons?

Perfect scaling

Any size, any resolution — No more creating multiple PNG sizes
High-DPI ready — Always sharp on Retina and 4K displays
Future-proof — Works on any screen density, present and future

Dark mode support

SVG favicons can adapt to the user's color scheme using CSS media queries:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #333; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M16 2L2 30h28L16 2z" />
</svg>

Small file size

SVGs are typically much smaller than equivalent PNGs, especially at larger sizes.

Browser support

Browser	SVG Favicon Support
Chrome	Yes (80+)
Firefox	Yes (41+)
Edge	Yes (80+)
Safari	Yes (15.4+)
Opera	Yes (67+)

How to fix it

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

Best practices

Always provide a PNG fallback — For older browsers that don't support SVG favicons
Keep it simple — Complex SVGs may not render well at 16x16
Use CSS for dark mode — Take advantage of SVG's media query support
Optimize the SVG — Remove unnecessary metadata and whitespace
Test across browsers — Verify it renders correctly in all major browsers

Recommended setup

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

<!-- PNG fallback (older browsers) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

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"