Gerador de favicon SVG
Transforme seu logotipo em um favicon SVG nítido, com versão para modo escuro e arquivos alternativos para navegadores antigos.
Enviar logo em SVG
Solte o arquivo SVG aqui ou clique para selecionar
Recursos modernos de favicon SVG
Infinitamente escalável
Um favicon SVG permanece perfeitamente nítido em qualquer tamanho ou densidade de pixels – sem desfoque de aumento de escala, nunca.
Suporte ao modo escuro
Envie variantes claras e escuras para que seu ícone se adapte automaticamente ao tema do sistema do visitante.
Tamanho de arquivo menor
Um SVG compacto geralmente pesa menos que um conjunto completo de bitmaps PNG e ICO combinados.
Guias fixadas do Safari
Exporte uma máscara SVG monocromática que o Safari usa para guias fixadas e Touch Bar.
Alternativos legados
Os substitutos de ICO e PNG agrupados mantêm seu favicon visível em navegadores sem suporte a SVG.
Troca de tema CSS
Consultas de mídia com esquema de cores preferidas integradas trocam cores dentro do SVG sem JavaScript.
Como criar um favicon SVG
De um único logotipo SVG a um favicon completo com tema definido em menos de um minuto.
1. Envie seu SVG
Insira seu logotipo vetorial como um arquivo SVG. Ele é analisado inteiramente no seu navegador – nada é carregado em um servidor.
2. Personalize cores e tamanho
Ajuste a cor do ícone, o plano de fundo e o tamanho da tela e, em seguida, ajuste variantes claras e escuras separadas para combinar com sua marca.
3. Visualize claro e escuro
Alterne entre as visualizações padrão, claro e escuro para confirmar se o seu favicon é lido claramente em cada tema.
4. Baixe e incorpore
Baixe o pacote completo – substitutos SVG, ICO e PNG – e cole as tags de link fornecidas em seu cabeçalho HTML.
Favicon SVG ou Bitmap
Por que um favicon vetorial supera a abordagem tradicional de PNG e ICO.
| Capacidade | Favicon SVG | Favicon PNG/ICO |
|---|---|---|
| Clareza de escala | Perfeito em qualquer tamanho | Precisa de vários tamanhos fixos |
| Modo escuro | Adapta-se via consulta de mídia CSS | Requer arquivos de imagem separados |
| Tamanho do arquivo | Um pequeno arquivo vetorial | Vários bitmaps se somam |
| Retina/HiDPI | Nítido em todos os monitores | Precisa de exportações 2x/3x |
| Manutenção | Edite um arquivo de origem | Reexportar todos os tamanhos mediante alteração |
| Suporte ao navegador | Todos os navegadores modernos | Universal, incluindo legado |
Geramos ambos: um SVG para navegadores modernos, além de substitutos ICO e PNG, para que cada visitante veja seu ícone.
Configuração HTML do favicon SVG
As tags de link exatas para colocar no cabeçalho da sua página.
Coloque essas tags dentro da seção head do seu documento HTML, ordenadas para que os navegadores modernos escolham o SVG e os mais antigos voltem normalmente.
| Ativo | Etiqueta de link | Objetivo |
|---|---|---|
| favicon.svg | <link rel="icon" href="/favicon.svg" type="image/svg+xml"> | Favicon de vetor primário para navegadores modernos |
| favicon.ico | <link rel="icon" href="/favicon.ico" sizes="any"> | Fallback para navegadores sem suporte SVG |
| icon-192.png | <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"> | Fallback PNG e ícone de manifest PWA |
| apple-touch-icon.png | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | Ícone da tela inicial no iOS e iPadOS |
| safari-pinned-tab.svg | <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000"> | Máscara monocromática para guias fixadas do Safari |
Liste o ícone SVG primeiro para que navegadores capazes o utilizem; a linha ICO mantém os navegadores legados cobertos.
Quando usar favicons SVG
Onde um favicon vetorial oferece as maiores vitórias.
Aplicativos web modernos
Se o seu público usa navegadores atualizados, um favicon SVG permanece nítido em qualquer lugar com um único arquivo leve.
Consistência da marca
Mantenha uma fonte vetorial de verdade para que seu ícone pareça idêntico em guias, favoritos e telas iniciais.
Sites em modo escuro
SVGs com reconhecimento de tema trocam de cores automaticamente, para que seu favicon nunca desapareça em um navegador cromado escuro.
Dispositivos de alto DPI
Em telas Retina e 4K, os favicons vetoriais são renderizados com pixels perfeitos sem exportar bitmaps 2x ou 3x.
Perguntas frequentes
Tudo o que você precisa saber sobre favicons SVG e como enviá-los.
Por que usar SVG para favicons?
Um favicon SVG é um arquivo vetorial único que permanece nítido em qualquer tamanho ou densidade de pixels, suporta modo escuro por meio de CSS e geralmente pesa menos do que um conjunto completo de bitmaps PNG e ICO — por isso é mais nítido e fácil de manter.
Todos os navegadores suportam favicons SVG?
Todas as versões atuais do Chrome, Edge, Firefox e Safari suportam favicons SVG. Os navegadores mais antigos os ignoram, e é por isso que também geramos substitutos de ICO e PNG para que seu ícone apareça em todos os lugares.
Como faço para implementar favicons SVG no modo escuro?
Incorpore uma consulta de mídia com esquema de cores preferenciais dentro do SVG e defina as cores para cada tema. Nosso gerador adiciona isso automaticamente, de modo que o favicon muda de cor quando o visitante alterna entre o modo claro e escuro - sem necessidade de JavaScript.
Os favicons SVG são seguros? Devo higienizá-los?
SVGs podem conter scripts, portanto, veicule apenas arquivos de uma fonte em que você confia. Esta ferramenta analisa seu SVG localmente e gera uma marcação limpa e estática, sem referências externas ou scripts, mantendo o resultado seguro para envio.
Ainda preciso de um substituto da ICO?
Sim – para o maior alcance. Os navegadores modernos preferem o SVG, mas um favicon.ico (e um PNG) garante que seu ícone ainda apareça em navegadores e ferramentas mais antigos que leem apenas formatos de bitmap. Nosso pacote inclui ambos.
Como adiciono um favicon SVG em Next.js ou outras estruturas?
Coloque favicon.svg (mais os substitutos ICO e PNG) em sua pasta pública ou estática e referencie-os com as tags de link fornecidas. No Next.js você pode adicionar as mesmas tags por meio do campo de ícones de metadados ou diretamente no cabeçalho do layout raiz.
Want to go deeper?
Optimizing Favicons Across Different Browsers