Guia

Favicon (.ico) vs SVG

SVG é o formato mais empolgante da era moderna — vetorial, adaptável ao modo escuro e minúsculo. Mas ainda não substitui completamente o .ico em 2026. Entenda por quê e como usar ambos.

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

SVG escala infinitamente e suporta media queries de modo escuro dentro do próprio arquivo. Um SVG de 1 KB cobre todas as densidades em todos os navegadores modernos.

ICO é o fallback universal. Versões antigas do Safari, navegadores legados e a convenção <code>/favicon.ico</code> ainda dependem dele.

O setup recomendado: publique <code>favicon.ico</code> + <code>favicon.svg</code>. Navegadores que suportam SVG vão preferi-lo; o restante volta ao .ico automaticamente.

Como funciona

  1. 1

    Crie ou exporte um SVG

    viewBox quadrado, elemento <svg> raiz único.

  2. 2

    Gere o fallback .ico

    Use o FetchFavicon para rasterizar seu SVG em um .ico multirresolução.

  3. 3

    Vincule ambos

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

Experimente agora

Gere o par .ico + SVG

Conversor de SVG para PNG

Perguntas frequentes

Posso abandonar o .ico se usar SVG?+

Não com segurança. Embeds sociais, leitores RSS e ferramentas legadas ainda buscam /favicon.ico por convenção.

Quais navegadores suportam favicon SVG?+

Chrome 80+, Edge 80+, Firefox 41+, Safari 15+ e Brave. O Safari do iOS ainda prefere o apple-touch-icon em PNG.

Quão pequeno pode ser um favicon SVG?+

Menos de 1 KB para uma marca monocromática simples. Logos multicoloridos complexos raramente passam de 4 KB.

Ferramentas relacionadas

Mais guias

Guias