O que é um favicon e como criar um a partir do seu logo (2026)

Um favicon é o pequeno ícone que representa seu site em uma aba do navegador, favorito ou tela inicial do celular. Crie-o a partir do símbolo do seu logo, simplifique-o para que fique legível em 16–32 pixels, e disponibilize o conjunto mínimo de 2026: um SVG, um ICO de reserva, e um apple-touch-icon de 180×180.

Por LogoSagaPublicado
Nesta página
  1. O que é um favicon?
  2. Por que o favicon importa?
  3. Os tamanhos e formatos de favicon que você precisa
  4. Como criar um favicon a partir do seu logo
  5. Vinculando um favicon no seu HTML
  6. Bônus: um favicon que se adapta ao modo escuro
  7. Testando seu favicon
A mesma marca mostrada em tamanhos de favicon, incluindo uma versão do tamanho de aba do navegador.
Um favicon é o símbolo do seu logo, simplificado para permanecer claro em tamanhos minúsculos.

O que é um favicon?

Um favicon (abreviação de "favorite icon", ícone favorito) é a pequena imagem quadrada que representa um site em uma aba do navegador, um favorito, um item de histórico e uma tela inicial de celular. É quase sempre uma versão simplificada do logo de uma marca — especificamente o símbolo, já que não há espaço para o nome completo nesse tamanho.

Por que o favicon importa?

Um favicon é uma peça pequena, mas constante, de branding. Com uma dezena de abas abertas, muitas vezes é a única forma de alguém identificar seu site rapidamente, e um ícone salvo na tela inicial fica ao lado de ícones de aplicativos polidos. Um favicon nítido e fiel à marca parece cuidado; um ausente ou borrado parece inacabado.

Os tamanhos e formatos de favicon que você precisa

Você não precisa da dezena de ícones que tutoriais antigos listam. Em 2026, o conjunto mínimo e confiável é pequeno:

ArquivoTamanhoFinalidade
favicon.svgqualquernavegadores modernos; pode se adaptar ao modo escuro
favicon.ico16 + 32reserva legada (navegadores mais antigos)
apple-touch-icon.png180×180tela inicial do iOS
Ícones PWA (opcional)192, 512aplicativos web instaláveis

Tamanhos como 64×64, 96×96 e 128×128, recomendados por guias antigos, estão obsoletos — pule-os. O .ico é uma reserva, não o arquivo principal: navegadores que suportam SVG vão preferi-lo.

  1. Comece pelo símbolo, não pelo logo completo — o nome não será legível no tamanho de aba.
  2. Simplifique para tamanhos minúsculos. Remova detalhes finos, linhas finas e gradientes sutis que desaparecem em 16–32 pixels. Prefira formas fortes e alto contraste.
  3. Mantenha-o quadrado com um pouco de espaçamento para que não fique apertado contra as bordas da aba.
  4. Exporte o conjunto — SVG, ICO e o PNG de 180×180 — a partir do arquivo mestre vetorial do seu logo.
A etapa de exportação do editor LogoSaga mostrando o favicon.svg incluído com os arquivos do logo.
Exportar a partir do arquivo mestre vetorial garante um favicon que combina exatamente com o logo.

Como o SVG é o formato mestre ideal, vale a pena entender SVG vs PNG para logos antes de exportar.

Vinculando um favicon no seu HTML

Aponte para os arquivos a partir do <head> das suas páginas. Um conjunto moderno e mínimo se parece com isto:

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Navegadores que suportam SVG o usam; o restante recorre ao ICO.

Bônus: um favicon que se adapta ao modo escuro

Um favicon SVG pode carregar seu próprio estilo de modo escuro. Incorpore uma media query dentro do SVG para que o símbolo mude de cor conforme o tema do navegador:

<style>
  path {
    fill: #18231d;
  }
  @media (prefers-color-scheme: dark) {
    path {
      fill: #eef1ea;
    }
  }
</style>

Chrome, Firefox e Edge respeitam isso; o Safari ainda não, então escolha cores que permaneçam legíveis em ambos os temas como reserva.

Testando seu favicon

Verifique em uma aba de navegador real, no claro e no escuro, e na tela inicial de um celular. Como os navegadores fazem cache de favicons de forma intensa, faça uma atualização forçada após qualquer mudança — ou force a atualização do cache renomeando o arquivo ou adicionando ?v=2. Se parecer turvo no tamanho de aba, simplifique mais o símbolo: o favicon é o teste honesto de quão bem um logo se reduz.

Se você construir seu logo com o LogoSaga, a exportação já inclui um favicon.svg junto com o SVG e o PNG do logo, então o favicon sempre combina exatamente com o símbolo.

Crie um logo com um favicon combinando

Perguntas frequentes

Qual tamanho deve ter um favicon?

Forneça um SVG escalável mais tamanhos PNG raster: 32×32 é o padrão moderno de aba, 16×16 é o tamanho pequeno clássico, e 180×180 é o ícone de toque da Apple. PWAs também precisam de 192×192 e 512×512.

Qual formato deve ter um favicon — SVG, PNG ou ICO?

Use um SVG para navegadores modernos, um ICO como reserva legada, e PNGs para o apple-touch-icon e os tamanhos de PWA. SVG é escalável e pode até se adaptar ao modo escuro; ICO cobre navegadores mais antigos.

Um favicon pode mudar no modo escuro?

Sim, com um favicon SVG. Incorpore uma media query prefers-color-scheme dentro do SVG para definir cores claras e escuras. O Safari ainda não a respeita, então escolha uma cor neutra que funcione em ambos.

Por que meu favicon não aparece ou não atualiza?

Navegadores fazem cache de favicons de forma agressiva. Após uma mudança, atualize a página com força, ou force a atualização do cache renomeando o arquivo ou adicionando uma query string como favicon.svg?v=2, e confirme se as tags link no head da página estão corretas.

Fontes