tooly

Como criar um favicon para o seu site

O favicon é o ícone pequeno na aba do navegador, nos favoritos, na tela inicial do iPhone e nos resultados do Google. Antes era preciso lidar com uma dúzia de tamanhos; hoje quatro arquivos cobrem todas as plataformas.

Os arquivos que você realmente precisa

  • favicon.ico com 16, 32 e 48 px — navegadores antigos, atalhos do Windows, o rastreador do Google.
  • apple-touch-icon.png em 180 px — tela inicial do iOS.
  • icon-192.png e icon-512.png — Android e o web app manifest (sites instaláveis, telas de abertura).
  • site.webmanifest — aponta para os dois PNGs.

Gere todos de uma vez

  1. Desenhe um logo quadrado. Formas simples e uma ou duas cores ficam melhores em 16 px; texto não funciona bem.
  2. Abra Gerador de favicon e solte o logo — SVG é ideal porque cada tamanho é rasterizado com nitidez; um PNG de 512 px também funciona.
  3. Baixe o ZIP e copie os arquivos para a raiz do seu site.
Gerador de faviconCrie favicon.ico (16/32/48), apple-touch-icon e ícones PNG a partir de PNG, JPG, WebP ou SVG. Todos os tamanhos em um ZIP, gerado no navegador.

Adicione isto ao seu <head>:

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

<link rel="manifest" href="/site.webmanifest">

Problemas comuns

  • O logo não é quadrado. O gerador centraliza com preenchimento transparente; para um ícone mais ajustado, corte para um quadrado antes com Cortar imagem.
  • O favicon antigo ainda aparece. Navegadores fazem cache de favicons de forma agressiva. Troque o nome do arquivo ou adicione ?v=2 ao link.
  • Abas escuras. Um logo preto some num tema escuro do navegador. Dê a ele um fundo preenchido.
Converter SVG para PNG onlineConverta arquivos vetoriais SVG para PNG em qualquer tamanho no navegador. Defina a largura, mantenha a transparência, converta em lote e baixe um ZIP.

Publicado em 2026-09-21