Tamanhos de favicon: quais arquivos um site precisa?

A resposta curta

Você não precisa mais de dezenas de arquivos de ícone. Guias antigos listam tamanhos para blocos do Windows, cada modelo de iPad e navegadores que já nem existem; hoje quase tudo lê um de poucos arquivos. Coloque estes na pasta raiz do seu site, junto da página inicial, e acrescente as linhas correspondentes no head de todas as páginas.

O navegador pede /favicon.ico por conta própria mesmo sem nenhum HTML, por isso esse arquivo deve sempre existir. Todo o resto é encontrado pelas tags link e pelo manifest.

Por que tantos tamanhos

Um favicon aparece em lugares muito diferentes. A aba do navegador mostra o ícone com 16 por 16 pixels CSS, o que dá 32 pixels reais em um notebook com tela de alta densidade, às vezes mais. O Windows usa 48 pixels para atalhos na área de trabalho. O Google mostra o ícone do site ao lado dos resultados de busca e pede uma imagem quadrada; ele recomenda um tamanho maior que 48 pixels, e a imagem de 48 pixels do favicon.ico junto com os PNGs maiores cobre isso.

No celular é diferente. Quando alguém adiciona seu site à tela inicial, o iOS procura o apple-touch-icon e o Android lê os ícones do web manifest. Esses ícones ficam ao lado de apps de verdade, então precisam ser grandes e nítidos. Se estiverem faltando, o celular tira um print da página ou mostra uma letra no lugar.

Reduzir uma única imagem grande não é o ideal para os menores tamanhos: um logo de 512 pixels encolhido para 16 transforma linhas finas em um borrão cinza. Por isso o gerador desenha os PNGs pequenos separadamente a partir da sua imagem e deixa você conferir o resultado em 16, 32, 48 e 180 pixels antes de baixar.

As tags HTML para colocar

Depois de baixar o pacote, cole estas linhas na seção head das suas páginas (a ferramenta mostra tudo em Código HTML, com um botão Copiar código, e o ZIP traz as linhas no arquivo favicon-html.txt):

• <link rel="icon" href="/favicon.ico" sizes="48x48">
• <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
• <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
• <link rel="manifest" href="/site.webmanifest">
• <meta name="theme-color" content="#ffffff"> com a sua cor de fundo, que tinge a barra do navegador em alguns celulares

Detalhes de Apple, Android e SVG

O Apple touch icon deve ser quadrado e sem transparência. O iOS arredonda os cantos sozinho e preenche as áreas transparentes de preto, então um logo transparente pode acabar em um quadrado preto. O gerador sempre dá a esse arquivo um fundo sólido (a sua cor de fundo, ou branco se você desligou o fundo) e mantém o formato quadrado.

O arquivo site.webmanifest lista os ícones de 192 e 512 pixels junto com o nome e as cores do site. O Android usa esse arquivo para o ícone da tela inicial e para apps web instalados. O Android também pode recortar os ícones em círculo ou em outro formato; se o seu logo encosta nas bordas, acrescente margem para nada importante ser cortado. Alguns sites incluem um ícone maskable separado, com espaço extra em volta do logo, justamente para isso.

Um favicon SVG fica nítido em qualquer tamanho e pode até mudar de cor no modo escuro com uma media query de CSS dentro do arquivo. O suporte é bom nos navegadores de desktop atuais, mas não é universal, então trate como um complemento: mantenha o favicon.ico e os PNGs e, se você tiver um logo SVG limpo, acrescente você mesmo uma linha como <link rel="icon" type="image/svg+xml" href="/icon.svg">. O gerador também aceita SVG como imagem de origem e o desenha nítido em todos os tamanhos.

Como desenhar um ícone que funcione em 16 pixels

Em 16 por 16 há apenas 256 pixels, então um logo completo com o nome da marca fica ilegível. Os favicons que funcionam usam uma forma forte ou uma ou duas letras.

• Use o símbolo do seu logo sem o nome da empresa, ou as suas iniciais. A opção Texto do gerador cria um ícone limpo com uma a três letras.
• Mantenha as linhas grossas. Tudo o que for mais fino que cerca de um doze avos do ícone some em 16 pixels.
• Use bastante contraste entre o símbolo e o fundo. Confira a prévia da aba na versão clara e na escura, porque muita gente usa tema escuro no navegador.
• Ocupe o espaço. Margem grande deixa o ícone minúsculo ao lado das outras abas; entre 0 e 10 por cento costuma ficar bom, um pouco mais no formato círculo.
• Um fundo colorido com o formato Arredondado ou Círculo dá um bloco fácil de reconhecer; o fundo transparente funciona se o símbolo tiver contraste suficiente em abas claras e escuras.

Problemas comuns e soluções

• O ícone antigo continua aparecendo: os navegadores guardam favicons em cache por muito tempo. Abra o arquivo direto, recarregue com Ctrl+F5 ou acrescente uma versão ao endereço, por exemplo favicon.ico?v=2.
• O Google mostra um globo genérico: confira se o favicon pode ser acessado sem login, não está bloqueado no robots.txt e é quadrado. Pode levar dias ou semanas até os resultados de busca atualizarem.
• O ícone na tela de início do iPhone fica preto nas bordas: o ícone da Apple tinha transparência. Use o arquivo do gerador, que tem fundo sólido.
• O ícone fica borrado: a imagem de origem era pequena. Use uma imagem de pelo menos 512 pixels ou um SVG.
• O ícone não aparece em algumas páginas: as tags estão só no modelo de algumas páginas, ou os caminhos são relativos. Use caminhos que começam com barra, como no código gerado.