Como criar um favicon
Os tamanhos, formatos e o código necessários para um favicon que aparece em todo lugar.
O favicon é o ícone pequeno na aba do navegador, nos favoritos e ao lado do seu site nos resultados de busca do Google no celular. Um site sem favicon parece inacabado, e um favicon borrado fica ainda pior. Fazer um bom leva poucos minutos.
Comece com a arte certa
Um favicon aparece em tamanhos de até 16 por 16 pixels, então um logo completo com o nome escrito fica ilegível. Use um símbolo simples: o elemento gráfico do seu logo, uma inicial ou uma forma marcante na cor da marca. Teste reduzindo para um quarto do tamanho na tela: se ainda der para reconhecer, vai funcionar.
Comece com uma imagem quadrada de pelo menos 512 por 512 pixels, de preferência um PNG com fundo transparente. Se o seu logo não for quadrado, recorte para um quadrado com a proporção travada em 1:1.
Os arquivos necessários
| Arquivo | Tamanho | Usado por |
|---|---|---|
| favicon.ico | Contém versões de 16, 32 e 48 pixels | Navegadores, sistemas antigos, a requisição padrão de /favicon.ico |
| Um ícone PNG | 32 por 32 e 192 por 192 | Navegadores modernos, tela inicial do Android |
| apple-touch-icon.png | 180 por 180 | Favoritos na tela inicial do iPhone e do iPad |
A busca do Google também usa seu favicon nos resultados. Ele precisa ser quadrado, ter pelo menos 48 por 48 pixels e estar acessível para rastreamento no seu site.
Criando o arquivo ICO
Solte seu PNG quadrado no conversor de PNG para ICO. Ele gera um arquivo .ico de verdade com os tamanhos pequenos que os navegadores pedem. Para as versões PNG, redimensione a mesma imagem quadrada para 180, 192 e 32 pixels.
Adicionando ao seu site
Suba o favicon.ico para a raiz do site, para que fique acessível em seusite.com.br/favicon.ico, e adicione estas linhas dentro do head das páginas:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
No WordPress, vá em Aparência, Personalizar, Identidade do site e envie uma imagem quadrada como Ícone do site; o WordPress cria os tamanhos para você. Shopify, Wix e Squarespace têm cada um uma configuração de favicon nas opções do site ou do tema.
Quando o favicon novo não aparece
Os navegadores guardam favicons em cache com teimosia. Abra o site em uma janela anônima, ou acesse seusite.com.br/favicon.ico direto e atualize. O Google pode levar dias ou semanas para atualizar o ícone nos resultados, depois de rastrear a página inicial de novo.
Erros comuns
- Usar o logo completo com texto pequeno, que vira um borrão a 16 pixels.
- Um ícone branco em fundo transparente, que some nas abas claras do navegador.
- Fornecer apenas um arquivo minúsculo de 16 pixels, que fica borrado em telas de alta resolução.
- Esquecer o arquivo em /favicon.ico, que alguns navegadores e rastreadores pedem independentemente do que a página indique.