PT

Como criar um favicon para o seu site

Última atualização: 28 de outubro de 2026

O favicon é o pequeno ícone que aparece ao lado do nome do seu site nas abas do navegador, nos favoritos, no histórico e, no celular, nos resultados de busca do Google. Sem ele, os navegadores mostram um globo genérico e o site parece inacabado. Criar um bom favicon leva poucos minutos.

Comece pela imagem certa

  • Quadrada, com pelo menos 256 × 256 pixels, de preferência em PNG ou SVG com fundo transparente.
  • Simples: em 16 × 16 pixels, só formas marcantes continuam reconhecíveis. O símbolo do logo ou uma única letra funcionam muito melhor do que o logo completo com texto.
  • Com bom contraste, para aparecer bem tanto no tema claro quanto no escuro do navegador.

Se o seu logo está em SVG, você pode exportar um PNG grande com o SVG para PNG. Se a imagem ainda não é quadrada, o Redimensionar imagem ajuda a acertar as dimensões.

De quais arquivos você precisa

Cada lugar procura um arquivo diferente. Um conjunto moderno e prático é:

  • favicon.ico na raiz do site, com versões de 16, 32 e 48 pixels. Os navegadores e muitas outras ferramentas ainda pedem /favicon.ico automaticamente, mesmo que o seu HTML aponte para outro arquivo.
  • Um ícone SVG (opcional), que os navegadores modernos podem usar em qualquer tamanho.
  • apple-touch-icon.png, com 180 × 180 pixels, usado quando alguém adiciona o seu site à Tela de Início do iPhone ou do iPad.

Os resultados de busca do Google também usam o favicon. As diretrizes do Google pedem um ícone quadrado com tamanho múltiplo de 48 pixels, então incluir a versão de 48 × 48 no arquivo ICO, ou oferecer um PNG de 96 ou 192 pixels, já resolve.

Crie o favicon.ico

  1. Abra o PNG para ICO e solte o seu PNG quadrado. JPG, WebP e SVG também funcionam.
  2. Marque os tamanhos 16, 32 e 48. Adicione o 256 só se quiser usar o arquivo também como ícone do Windows.
  3. Baixe o arquivo e envie para a pasta principal do site com o nome favicon.ico, para que ele fique disponível em seusite.com.br/favicon.ico.

Adicione o HTML

Coloque estas linhas dentro do <head> de todas as páginas, trocando os nomes pelos dos seus arquivos:

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

Os navegadores que entendem SVG usam o SVG; os outros recorrem ao ICO. Se você não tem uma versão em SVG, deixe de fora a segunda linha.

Por que o ícone antigo continua aparecendo?

Os navegadores guardam favicons em cache por muito tempo. Abra o endereço do ícone diretamente e recarregue, ou confira em uma janela anônima. O Google atualiza o ícone nos resultados de busca na próxima vez que rastrear a sua página inicial, o que pode levar dias ou semanas.

Ferramentas usadas neste guia

Mais guias