Gere favicon ICO multirresolução sem sair do navegador

O que um favicon ICO deve conter

Favicons.ico clássicos incorporam várias resoluções para abas, favoritos e atalhos nítidos em ecrãs Retina. Enviar só um 16×16 desfocado que é ampliado parece antiquado.

O WebP.Best oferece pacotes como Favicon (16/32/48), Standard (adiciona 64) e Full (até 256) para cobrir navegadores e Windows comuns sem desenhar cada tamanho à mão.

• Abas do navegador → tamanhos menores do pacote Favicon
• Atalhos / algumas superfícies do SO → Standard ou Full
• Arte de origem → preferencialmente um logo ou símbolo quadrado e claro

Prepare a imagem de origem

Comece com um master quadrado ou quase quadrado e bordas limpas. PNG ou WebP transparentes funcionam bem. Fotos muito cheias fazem ícones fracos a 16 px — simplifique ou recorte para o símbolo primeiro.

Se o logo for só um wordmark largo, espere faixas ou recorte ao forçar o quadrado. Decida se o ícone deve ser um símbolo ou monograma antes de converter.

Passos no WebP.Best

Abra o conversor na página inicial e adicione o ficheiro do logo (PNG ou WebP com transparência é o ideal). Formato de saída: ICO.

Escolha um pacote de tamanhos: Favicon (16/32/48 px) cobre abas; Standard acrescenta 64 px para atalhos; Full vai até 256 px para ícones Windows mais nítidos. Não precisa exportar cada tamanho — o pacote junta tudo num .ico.

Escolha como preencher o quadrado: Fit inside mantém todo o logo visível com margens se a origem não for quadrada; Fill and crop amplia até encher e pode cortar bordas — melhor para símbolos simples do que texto pequeno.

Converta, descarregue o .ico e verifique o tamanho mais pequeno numa aba. Tudo corre localmente no seu dispositivo.

Fit inside vs fill and crop: o que escolher

Pense no ícone como uma moldura quadrada. Fit inside reduz o logo até caber inteiro — nada é cortado, mas podem ficar faixas vazias se o logo for largo ou alto.

Fill and crop amplia até cobrir a moldura e recorta o que sobra. Bom para círculos ou letras simples; arriscado com wordmarks longos que perdem letras a 16 px.

Precisa de um master estritamente quadrado antes do ICO? Expanda Opções avançadas, escolha Largura × altura exatas (ex.: 512×512), Fill and crop ou Fit inside, converta uma vez para PNG e depois gere o ICO com esse quadrado. Se os pacotes predefinidos já servirem, ignore este passo.

• Só wordmark largo → Fit inside, ou redesenhe um símbolo quadrado primeiro
• Ícone redondo estilo app → Fill and crop costuma ficar mais limpo
• Na dúvida → Fit inside primeiro; mude para Fill and crop só se as margens incomodarem

Usar o ICO no site

Coloque favicon.ico na raiz do site ou ligue-o no head HTML com o type adequado. Muitos hosts estáticos aceitam favicons PNG; o ICO continua útil para favoritos antigos e alguns contextos de desktop.

Após publicar, force recarregamento ou use janela privada: os navegadores fazem cache agressivo de favicons. Um ícone «errado» após upload costuma ser cache, não um ICO defeituoso.

O que isto não faz

Este caminho é para ícones estáticos. Não desenha a sua marca, não remove fundos automaticamente nem gera SVG. Linhas muito finas podem desaparecer a 16 px — teste o tamanho mínimo.

O empacotamento corre localmente com pacotes predefinidos. Se também precisar de ícone «Adicionar ao ecrã inicial» no telemóvel, pode ser necessário PNG separado — um ICO sozinho nem sempre basta.