Quais arquivos de favicon um site precisa, e os tamanhos de cada um

Um site precisa de um pequeno conjunto de arquivos de ícone, e a maioria das decisões é sobre tamanho. Coloque um favicon.ico com imagens de 16, 32 e 48 pixels na raiz do site, para as abas do navegador e o Windows. Adicione um ícone Apple touch de 180 pixels para a tela inicial do iPhone e do iPad, e ícones PNG de 192 e 512 pixels listados em um manifesto de aplicativo web. O gerador de favicon cria todos eles a partir de uma única logo e escreve as linhas de HTML para você colar nas suas páginas.

Os arquivos e seus tamanhos

O ZIP que o gerador baixa reúne os sete arquivos. O arquivo favicon.ico é formado por três imagens PNG, de 16, 32 e 48 pixels, guardadas dentro de um único arquivo. Cada ícone é a mesma logo desenhada em tamanho menor. O gerador trabalha a partir de uma versão de 512 pixels da sua imagem e cria cada tamanho a partir dela.

As linhas de HTML

O gerador escreve quatro linhas para o cabeçalho (head) das suas páginas:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

A primeira linha aponta para o favicon.ico e o declara como 48 por 48. A segunda traz o PNG de 32 pixels. A terceira indica o ícone Apple touch, e a quarta aponta para o manifesto, onde os ícones de 192 e 512 pixels estão listados. O PNG de 16 pixels está no ZIP, mas não nessas linhas. Os navegadores também procuram /favicon.ico por conta própria, então o arquivo ainda é encontrado caso a primeira linha esteja ausente. Mantenha os caminhos como estão, a menos que seus arquivos estejam em outro lugar.

Por que tamanhos pequenos pedem formas simples

Em 16 por 16 pixels, um ícone tem 256 pixels no total. Um ícone de 48 pixels tem 2.304, e a fonte de 512 pixels tem 262.144. A maior parte dos detalhes de uma logo se perde quando ela chega a 16 pixels, então uma linha fina ou uma palavra pequena vira um borrão. Use uma marca simples, ou uma ou duas letras com contraste forte.

A opção de letra aceita um ou dois caracteres e os desenha grandes no centro do ícone, reduzindo-os se ficarem largos demais. As formas disponíveis são Quadrado, Arredondado e Círculo. A prévia mostra lado a lado os resultados de 16, 32, 48, 180 e 512 pixels, além das abas claro e escuro, para que você avalie os tamanhos pequenos antes de baixar. As prévias se atualizam conforme você muda a forma, a margem ou o fundo, então pode testar cada configuração primeiro.

Margem, fundo e o ícone da Apple

A margem tem três opções: Sem margem, Pequena e Grande. Pequena deixa 10 por cento do ícone vazio em cada lado, e Grande deixa 20 por cento. No modo imagem, Sem margem recorta a imagem no quadrado central, então as extremidades de uma logo larga se perdem. As configurações com margem encaixam a imagem inteira dentro do quadrado.

As opções de fundo são Transparente, Branco e Personalizado, sendo Transparente o padrão. O ícone Apple touch é sempre opaco. No modo imagem, as áreas transparentes dele recebem o fundo escolhido, ou branco quando o fundo é Transparente. No modo letra, recebem a cor de fundo da letra. Áreas transparentes em um ícone Apple touch podem aparecer em preto no iPhone e no iPad, por isso o gerador as preenche. Os demais tamanhos mantêm a transparência que você escolheu. Por que um PNG transparente fica com fundo preto explica a causa.

Um favicon é quadrado, então uma logo larga precisa primeiro de uma moldura quadrada. O criador de foto quadrada encaixa a imagem inteira dentro de um quadro 1:1, com borda desfocada, branca, preta ou personalizada, para que nada seja cortado. Redimensionar a imagem define pixels exatos. Com Manter proporções ativado e os dois lados preenchidos, a imagem cabe na caixa sem distorção. Proporções de foto explicadas trata dos formatos mais comuns.

Mudanças que levam tempo para aparecer

Os navegadores guardam os favicons em cache. Um arquivo alterado no mesmo endereço pode continuar mostrando o ícone antigo por algum tempo, então uma atualização comum da página muitas vezes não basta. Abra o endereço do ícone diretamente para confirmar que o novo arquivo está no servidor e, depois, recarregue a página ignorando o cache. Se o ícone antigo continuar aparecendo, dê ao novo arquivo outro nome e atualize o link para apontar para ele.

Como fazer com o fixmint

1. Escolha Imagem e arraste sua logo para a caixa, ou escolha Letra e digite um ou dois caracteres.
2. Defina Margem como Nenhuma, Pequena ou Grande, e Fundo como Transparente, Branco ou Cor personalizada.
3. Confira os ícones de 16, 32 e 48 px nas abas claro e escuro, e as prévias de 180 e 512 px.
4. Clique em Baixar ZIP para os sete arquivos, ou em Baixar favicon.ico para somente esse arquivo.
5. Clique em Copiar HTML e cole as linhas de HTML para o seu cabeçalho no head de cada página.

Casos especiais

• Sua imagem fica no seu dispositivo. O gerador cria os ícones no seu navegador, e nada é enviado.
• Letras com dois caracteres. Dois caracteres são aceitos e são desenhados menores para que caibam os dois, o que os torna mais difíceis de ler em 16 pixels do que uma letra única.
• Nomes dos arquivos. Mantenha os nomes usados no HTML, porque os links apontam para eles.
• Arquivos ilegíveis. Se uma imagem não puder ser transformada em ícones, o gerador mostra a mensagem "Não foi possível criar os ícones a partir desta entrada. Tente outra imagem." e limpa os resultados. Tente outro arquivo ou salve a imagem novamente em um formato comum.