Como criar um favicon para o seu site

O favicon é o ícone pequeno na aba do navegador, na barra de favoritos, no histórico, na tela de início do iPhone e ao lado do nome do seu site nos resultados de busca. Muitas vezes, é a única parte da sua marca que o visitante vê quando está com vinte abas abertas. Acertar isso antes significava lidar com uma dúzia de tamanhos. Hoje, um punhado de arquivos cobre todas as plataformas que importam.

Este guia mostra o que gerar, como desenhar um ícone que sobrevive a 16 pixels, como instalá-lo e como diagnosticar os problemas mais comuns.

Os arquivos que um site moderno precisa

• favicon.ico com imagens de 16, 32 e 48 px. Os navegadores pedem /favicon.ico por conta própria mesmo sem nenhum HTML, o Windows o usa em atalhos, e ele é o fallback mais seguro.
• apple-touch-icon.png em 180×180. Usado quando alguém adiciona o site à tela de início de um iPhone ou iPad.
• icon-192.png e icon-512.png. Ícones da tela inicial do Android e da tela de abertura de um web app instalado.
• site.webmanifest. Um pequeno arquivo JSON que aponta para os dois ícones do Android e, se você quiser que o site seja instalável, o descreve.
• Opcionalmente, icon.svg. Um único ícone vetorial que os navegadores com suporte a favicons em SVG renderizam nítido em qualquer tamanho, e que pode trocar de cores no modo escuro.

Todo o resto que você pode ver em tutoriais antigos, como dezenas de tamanhos de PNG e imagens de bloco específicas de navegadores, não é mais necessário para um site comum.

Gere o conjunto a partir de um logo

1. Prepare uma imagem de origem quadrada. Um SVG é o ideal; se não, um PNG de pelo menos 512×512.
2. Abra o Gerador de favicon e solte o arquivo. São aceitos PNG, JPG, WebP e SVG de até 20 MB.
3. Baixe o ZIP. Ele contém favicon.ico (com 16, 32 e 48 px dentro), apple-touch-icon.png, icon-192.png, icon-512.png e site.webmanifest.
4. Copie os arquivos para a raiz do seu site, ao lado da página inicial.

Cada tamanho é desenhado direto a partir do original, então um SVG é rasterizado nativamente em 16 px, em vez de ser reduzido de um bitmap grande. A renderização acontece no seu navegador; o logo não é enviado. Uma imagem que não é quadrada é redimensionada para caber e centralizada, com espaço transparente nos lados menores.

O gerador não cria o icon.svg. Se você quiser um favicon em SVG, copie o seu próprio logo em SVG para a raiz do site com esse nome.

Adicione o HTML

Coloque estas linhas no <head> de todas as páginas, ou no template de layout compartilhado:

<link rel="icon" href="/favicon.ico" sizes="32x32">

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

Deixe de fora a linha do SVG se você não tiver um. O atributo sizes="32x32" na linha do ICO importa quando existe um SVG: ele impede que alguns navegadores escolham o ICO em vez do SVG, que é mais nítido.

O manifest gerado lista os ícones com caminhos absolutos, como /icon-192.png. Se o seu site fica numa subpasta, e não na raiz do domínio, ajuste esses caminhos.

Desenhando um ícone que sobrevive a 16 pixels

Em 16×16 há 256 pixels no total. Nenhum ajuste de exportação salva um desenho que precisa de mais do que isso.

• Use o símbolo, não o logo. Uma única letra, um monograma ou o símbolo sem o logotipo escrito. Palavras viram uma mancha cinza abaixo de 32 px.
• Formas grossas, poucas cores. Linhas mais finas que cerca de 1/16 da largura do ícone desaparecem no menor tamanho. Duas cores com contraste forte funcionam melhor.
• Preencha o quadrado. Corte as margens vazias da imagem de origem. Um logo flutuando num espaço transparente fica minúsculo na aba.
• Teste os dois temas de aba. Barras de abas podem ser claras ou escuras. Um símbolo preto sobre fundo transparente some num tema escuro. Uma forma colorida sólida atrás do símbolo, como um quadrado com cantos arredondados, funciona nos dois.

Se o logo for largo, reduza-o ao símbolo com o Cortar imagem em 1:1 antes de gerar. Se um logo raster só existir num tamanho pequeno, ampliá-lo com o Ampliar uma imagem com IA dá ao ícone de 512 px bordas mais limpas do que simplesmente esticar.

Modo escuro com um favicon em SVG

Um favicon em SVG pode conter uma media query CSS para prefers-color-scheme: dark e mudar a cor de preenchimento quando o navegador usa um tema escuro. É a solução mais limpa para um símbolo escuro que some em abas escuras. Mantenha o ICO como fallback, porque nem todo navegador usa favicons em SVG.

Precisa de PNGs em outros tamanhos

Algumas plataformas, plugins e lojas de apps pedem um tamanho específico de PNG que o conjunto não inclui. O Converter SVG para PNG renderiza o seu logo vetorial em qualquer largura que você digitar, com fundo transparente.

Detalhes de plataforma que vale a pena conhecer

Tela de início do iPhone

O iOS não exibe transparência em ícones da tela de início; as áreas transparentes são preenchidas, geralmente com preto, e os cantos são arredondados pelo sistema. Como o gerador mantém a transparência, use uma imagem de origem com uma cor de fundo sólida para o ícone da Apple. Não arredonde os cantos você mesmo.

Android e sites instaláveis

Os launchers do Android podem recortar os ícones em círculo ou em outro formato. Para tornar o site instalável como um app, abra o site.webmanifest num editor de texto e adicione pelo menos name, short_name, start_url, display (por exemplo standalone) e theme_color. Se você marcar um ícone como "purpose": "maskable", mantenha a parte importante do desenho dentro dos 80% centrais do quadrado, já que as bordas podem ser cortadas.

Resultados de busca

O Google mostra um ícone do site ao lado dos resultados. As diretrizes dele pedem um ícone quadrado com tamanho múltiplo de 48 px, referenciado na página inicial e rastreável. A camada de 48 px no ICO e o PNG de 192 px atendem aos dois requisitos. Mudanças nos resultados de busca podem levar dias ou semanas para aparecer, porque o ícone é atualizado quando a página inicial é rastreada de novo.

Solução de problemas

• O favicon antigo continua aparecendo. Os navegadores guardam favicons em cache de forma agressiva, separado da página. Abra /favicon.ico diretamente e recarregue, ou adicione um parâmetro de versão como ?v=2 aos links dos ícones.
• O ícone aparece em branco ou quebrado. Abra a URL de cada arquivo no navegador. Um 404 geralmente significa que os arquivos foram para uma subpasta em vez da raiz do site, ou que o servidor precisa do tipo certo para .webmanifest.
• O ícone parece borrado na aba. As versões de 16 e 32 px vieram de uma imagem de origem detalhada demais. Prepare uma versão simplificada para os tamanhos pequenos.
• Um quadrado preto na tela de início do iPhone. A imagem de origem tinha fundo transparente. Gere de novo a partir de uma versão com fundo sólido.
• Uma linha fina no meio do quadrado. A origem era um logotipo escrito largo. Corte para o símbolo antes.

Checklist

1. Simplifique o logo para um símbolo legível em 16 px que funcione em abas claras e escuras.
2. Deixe-o quadrado, de preferência em SVG, ou em PNG de 512×512 ou maior.
3. Gere o conjunto e copie todos os arquivos para a raiz do site.
4. Adicione as quatro tags de link ao head, incluindo o icon.svg só se você tiver um.
5. Complete o manifest se o site precisar ser instalável.
6. Confira a URL de cada arquivo diretamente e depois teste na tela de início de um celular.