Verificação de favicon
Uma pequena imagem representa o seu site nas abas, nos favoritos, na tela inicial do celular e nos resultados de busca, e cada um desses lugares quer um arquivo diferente. Esta verificação baixa cada ícone que você publica e o mede.
Um logo, quatro pedidos diferentes
A palavra “favicon” vem de 1999, quando o Internet Explorer 5 começou a procurar um arquivo chamado favicon.ico para enfeitar o menu Favoritos. Esse quadradinho de 16 pixels ainda é pedido hoje, mas agora tem companhia. O arquivo baixado depende do aparelho que o visitante tem na mão:
| Onde aparece | Arquivo usado | Tamanho |
|---|---|---|
| Aba do navegador, favoritos, histórico | favicon.ico, ou um PNG ou SVG declarado com rel="icon" | 16 a 48 px, ou vetor |
| Tela inicial do iPhone e do iPad | rel="apple-touch-icon" | 180 × 180 px |
| Tela inicial do Android, web app instalado | Ícones listados no web manifest | 192 e 512 px |
| Resultados do Google no celular | O arquivo rel="icon" | Um múltiplo de 48 px, ou vetor |
Quando falta o arquivo certo, cada sistema recorre a algo pior. Você ganha um símbolo de página em branco na aba, uma miniatura da sua página no iOS, uma letra num círculo cinza no Android, um globo no Google.
O que é baixado e medido
A verificação lê o HTML da página informada e coleta cada <link> cujo rel é icon, apple-touch-icon ou mask-icon, além do link manifest e dos ícones que esse arquivo lista. Depois acrescenta dois endereços que os navegadores tentam sem que ninguém peça: /favicon.ico e /apple-touch-icon.png.
São baixados até 16 arquivos. Não acreditamos no atributo sizes declarado. Um arquivo ICO é aberto para listar os tamanhos guardados dentro dele, um SVG é lido para obter seu viewBox e arquivos PNG ou JPEG são medidos em pixels. No ícone da Apple, os cantos são amostrados para ver se há transparência. Um arquivo que acaba sendo uma página de erro HTML é indicado como tal, e com /favicon.ico essa surpresa é comum.
Como ler a lista de verificação
- Favicon clássico
- Passa com um arquivo ICO, ou um PNG de 16, 32 ou 48 px. Falha quando não existe nada disso e recebe um alerta quando um SVG é o único ícone, já que leitores de feed, navegadores antigos e muitas ferramentas pedem
/favicon.icoe nada mais. - Ícone SVG
- Opcional. Um arquivo vetorial fica nítido em qualquer tamanho e pode mudar de cor no modo escuro.
- Ícone da Apple
- Falha quando está ausente. Alertas: menor que 180 px, fundo transparente (o iOS o pinta de preto) ou um arquivo que existe no endereço padrão sem uma tag na página.
- Manifest
- Um alerta quando a página não aponta para nenhum. Se aponta para um que não carrega ou não é JSON válido, é uma falha. Dentro dele, a falta de um ícone de 192 px é uma falha, a falta de um ícone de 512 px é um alerta e a falta de um ícone “maskable” é uma observação.
- Cor do tema
- Opcional.
<meta name="theme-color">colore a barra do navegador no Android. - Tamanho aceito pelo Google
- Um alerta, a menos que um ícone quadrado meça um múltiplo de 48 px (48, 96, 144, 192) ou seja um SVG.
Qualquer falha dá o veredito “Incompleto”, qualquer alerta “Quase”. As simulações acima da lista mostram o ícone que cada sistema escolheria entre os que você publica.
Um conjunto completo a partir de um desenho
Comece com uma versão quadrada do seu logo, simplificada até ainda ser reconhecível em 16 pixels. Exporte estes arquivos:
favicon.icocom imagens de 16, 32 e 48 px dentro, colocado na raiz do site.icon.svg, se o seu logo existir em vetor.apple-touch-icon.png, 180 × 180, sobre fundo sólido com uma margem de uns 20 px. O próprio iOS arredonda os cantos.icon-192.pngeicon-512.pngpara o manifest.icon-maskable-512.png, com o logo dentro dos 80% centrais do quadrado, porque o Android pode recortar a imagem em círculo.
Depois declare-os:
<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">Os resultados incluem este bloco e um site.webmanifest correspondente, com o nome do seu site preenchido.
A verificação diz que os arquivos existem e têm as dimensões certas. Ela não sabe dizer se o desenho é legível em 16 px ou se fica bem numa barra de abas escura. Olhe as simulações e depois um celular de verdade.
Perguntas frequentes
Qual deve ser o tamanho de um favicon?
Você precisa de vários. Forneça um favicon.ico com 16, 32 e 48 px, um PNG de 180 px para aparelhos Apple e PNGs de 192 e 512 px em um web manifest. Um ícone SVG pode cobrir todos os tamanhos de aba de uma vez nos navegadores atuais.
Por que o Google mostra um globo em vez do meu favicon?
O Google precisa de um ícone quadrado com tamanho múltiplo de 48 px ou de um SVG, declarado com rel="icon" na página inicial e acessível ao Googlebot (não bloqueado no robots.txt). Depois de corrigir, o novo ícone aparece quando a página inicial for rastreada de novo, o que pode levar dias ou algumas semanas.
Ainda preciso de um arquivo favicon.ico?
Sim. Os navegadores aceitam PNG e SVG, mas muitos outros programas pedem /favicon.ico diretamente: leitores de feed, serviços de pré-visualização de links, alguns gerenciadores de senhas e navegadores antigos. Sem ele, seu servidor também registra um 404 para cada um desses pedidos.
Por que meu ícone tem fundo preto no iPhone?
O apple-touch-icon tem áreas transparentes e o iOS preenche a transparência com preto. Exporte o PNG sobre um fundo opaco na cor da sua marca.
Troquei meu favicon. Por que ainda vejo o antigo?
Os navegadores guardam favicons no cache por mais tempo do que quase qualquer outro arquivo. Abra o endereço do ícone diretamente e recarregue, ou acrescente uma versão ao link, como href="/favicon.ico?v=2". Os buscadores atualizam no ritmo deles.
O que é um ícone maskable?
Um ícone desenhado com margem extra para que o Android possa recortá-lo em círculo, quadrado arredondado ou qualquer outra forma sem cortar o logo. Você o declara no manifest com "purpose": "maskable". Sem ele, o Android reduz o seu ícone normal e o coloca sobre um disco branco.