De que ficheiros precisa um site hoje
Já não são precisos vinte tamanhos. Com estes cinco ficheiros, o ícone fica bem em todos os navegadores, no ecrã principal do telemóvel e nas pesquisas do Google:
favicon.icocom 16, 32 e 48 px: pedem-no os navegadores antigos, os leitores de RSS e o Google, que o procura na raiz mesmo sem ligação.icon.svg: um único ficheiro vetorial que fica nítido em qualquer tamanho. Só é gerado no modo de texto.apple-touch-icon.pngde 180 px, para o ecrã principal do iPhone. Não tem transparência, porque o iOS preenche o fundo a preto.icon-192.pngeicon-512.png, ligados nosite.webmanifestpara Android e aplicações web instaláveis.
Como instalar
Transfira o ZIP, copie os ficheiros para a raiz do site (onde está o index.html) e cole o HTML dentro do
<head>. Se o ícone mudar mais tarde, o navegador pode demorar a notar porque o guarda em cache: mudar
o nome do ficheiro ou acrescentar ?v=2 à ligação resolve o problema.
Conselhos de design
- A 16 px não se veem pormenores: uma letra, um símbolo ou o traço mais reconhecível do logótipo funcionam melhor do que o logótipo inteiro.
- Verifique o ícone nos dois separadores da pré-visualização: um favicon escuro desaparece no tema escuro do navegador.
- Cada tamanho é desenhado na sua resolução real, e não reduzido a partir do de 512, para que o de 16 px fique o mais nítido possível.
Um favicon provisório numa linha
Para ter algo enquanto se faz a maquete, o gerador ximg.es já serve uma imagem quadrada com uma letra, sem transferir nada:
<link rel="icon" href="https://ximg.es/32x32/2563eb/fff.png?text=X">