ℹInfoGeral

Nenhum favicon SVG encontrado — Ícones escaláveis e prontos para modo escuro

Favicons SVG escalam perfeitamente e suportam modo escuro via media queries CSS.

O que é um favicon SVG?

Um favicon SVG é um ícone vetorial que escala perfeitamente em qualquer tamanho. Diferente de favicons PNG ou ICO, favicons SVG nunca ficam pixelados — são renderizados na resolução exata necessária.

Por que usar favicons SVG?

Escala perfeita

Qualquer tamanho, qualquer resolução — Acabou criar vários tamanhos de PNG
Pronto para alta densidade — Sempre nítido em telas Retina e 4K
À prova de futuro — Funciona em qualquer densidade de tela, atual e futura

Suporte a modo escuro

Favicons SVG podem se adaptar ao esquema de cores do usuário usando media queries CSS:

<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>

Arquivo pequeno

SVGs costumam ser bem menores do que PNGs equivalentes, especialmente em tamanhos maiores.

Suporte em navegadores

Navegador	Suporte a favicon SVG
Chrome	Sim (80+)
Firefox	Sim (41+)
Edge	Sim (80+)
Safari	Sim (15.4+)
Opera	Sim (67+)

Como corrigir

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

Boas práticas

Sempre forneça um fallback PNG — Para navegadores mais antigos que não suportam favicons SVG
Mantenha simples — SVGs complexos podem não renderizar bem em 16x16
Use CSS para modo escuro — Aproveite o suporte a media queries do SVG
Otimize o SVG — Remova metadados e espaços em branco desnecessários
Teste em vários navegadores — Confirme a renderização correta nos principais

Configuração recomendada

<!-- 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" />

Verifique suas etiquetas Open Graph

Artigos relacionados

og:image quebrada

A URL de og:image não retorna uma imagem válida. As plataformas sociais mostrarão uma pré-visualização quebrada ou ausente.

URL canônica diferente da URL da página

A URL canônica aponta para uma URL diferente da página atual.

Charset não é a primeira meta tag

A declaração de charset deve ser o primeiro elemento dentro de <head>.

og:description poderia ser mais longa

Você tem espaço para uma descrição mais detalhada e aumentar o engajamento.

og:description contém uma URL

A og:description deve ser um resumo legível, não uma URL.

Keyword stuffing em og:description

Repetir as mesmas palavras em excesso na descrição parece spam.

Servidor MCP do OpenGraph

Inspecione tags OG direto do seu editor

O servidor MCP do OpenGraph permite inspecionar e analisar meta tags Open Graph diretamente do seu editor com IA ou assistente. Ele oferece duas ferramentas:

inspect_og— Obter e pontuar tags OG de qualquer URL
suggest_og_tags— Gerar HTML de meta tags recomendadas

Adicione o servidor ao arquivo .cursor/mcp.json do seu projeto:

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

Reinicie o Cursor depois de adicionar a configuração.

Adicione ao seu arquivo .vscode/mcp.json (requer extensão GitHub Copilot):

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

Certifique-se de ter o GitHub Copilot com suporte a MCP habilitado.

Adicione ao seu arquivo claude_desktop_config.json:

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

O arquivo de configuração fica em ~/Library/Application Support/Claude/claude_desktop_config.json no macOS ou %APPDATA%\Claude\claude_desktop_config.json no Windows.

Adicione ao seu arquivo ~/.codeium/windsurf/mcp_config.json:

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

Reinicie o Windsurf depois de modificar a configuração.

Adicione ao seu settings.json do Zed em context_servers:

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

Abra as configurações com Cmd+, e adicione a configuração.

Exemplos de uso

▶"Inspecione as tags OG de github.com"

▶"Sugira meta tags OG para o meu site https://example.com"

▶"Verifique se o meu blog tem etiquetas Open Graph corretas"