Imagem para ícone
O ícone que aparece na aba do navegador e na tela inicial do celular não é um arquivo só — são vários tamanhos. Solte a sua imagem e leve o favicon.ico e os PNG que faltam.
Ou arraste a imagem até aqui — uma por vez. Quadrada é o ideal; SVG também serve.
O que gerar
Enquadramento
Para logotipo, prefira “caber inteira”: preencher o quadrado corta as bordas e costuma decepar a ponta das letras. O fundo transparente só existe de fato se a sua imagem já tiver — um JPG é sempre opaco.
Ícones prontos
Os ícones são gerados inteiramente no seu navegador: a imagem não é enviada para nenhum servidor e nada é armazenado.
Como criar um favicon
Solte uma imagem — de preferência quadrada e simples —, escolha os tamanhos e clique em gerar. Você recebe o favicon.ico e os PNG separados, com download individual ou tudo em ZIP.
Por que preciso de vários tamanhos?
Porque cada lugar usa um. A aba do navegador mostra 16 ou 32 pixels, o atalho do iPhone usa 180, o Android usa 192, e a instalação de aplicativo web pede 512. Um arquivo grande esticado para todos os usos fica borrado nos pequenos; por isso o .ico guarda três tamanhos dentro dele e o navegador escolhe o certo.
Onde coloco esses arquivos?
O favicon.ico vai na raiz do site — os navegadores procuram por ele ali automaticamente, mesmo sem nenhuma linha de código. Os PNG são declarados no <head> com <link rel="icon"> e <link rel="apple-touch-icon">, e os de 192 e 512 entram no arquivo de manifesto do aplicativo.
Que imagem funciona bem como ícone?
Uma forma simples, com bastante contraste e pouco detalhe. A 16 pixels não sobra nada de uma fotografia nem de um texto — o que se lê naquele tamanho é uma letra, um símbolo ou um bloco de cor. Se a sua marca tem nome escrito, considere usar só a inicial.
O fundo fica transparente mesmo?
Só se a imagem de origem tiver transparência — um PNG ou SVG com fundo vazado. JPG é sempre opaco: ele não tem canal de transparência para preservar. Nesse caso, desmarque a opção e escolha a cor de fundo, em vez de receber o retângulo original.
E se eu quiser cantos arredondados?
Não arredonde. Os sistemas já aplicam a máscara própria deles — o iOS arredonda sozinho, e o Android recorta no formato que o aparelho usa. Um ícone que já vem arredondado acaba cortado duas vezes.