Imagens, SVG e ícones
Solte um logo ou um .ico existente, confira a aba em 16 px e baixe o pacote completo.
Solte aqui um arquivo PNG, JPG, WebP, GIF, SVG ou ICO, ou cole uma imagem da área de transferência.
As imagens são lidas e redimensionadas nesta aba; nada é enviado.
Escolha, solte ou cole uma imagem para começar.
Escolha, solte ou cole uma imagem para começar.
Site novo, logo novo ou um alerta do Lighthouse terminam no mesmo ponto: você tem um logo e precisa de meia dúzia de arquivos de ícone, além das tags link que apontam para eles. Este gerador de favicon cria o conjunto atual a partir dessa única imagem, sem redimensionar seis vezes a mesma figura num editor.
Também funciona no sentido contrário. Solte o favicon.ico herdado de um projeto antigo: cada tamanho guardado nele aparece na lista, pode ser salvo como PNG, e o maior vira a origem dos ícones de Apple e Android que estiverem faltando.
Ele cria o que navegadores e celulares pedem hoje, e nada do que eles deixaram de pedir.
Um favicon.ico com vários tamanhos, PNG de 16 e 32 px, o apple-touch-icon de 180 px, ícones Android de 192 e 512 px e o site.webmanifest saem de uma única imagem. As tags HTML apontam para o seu caminho real, então um site servido em /static/ não precisa de seis ajustes à mão.
Solte um favicon.ico existente e cada imagem embutida aparece com dimensões reais, profundidade de cor, codificação PNG ou BMP e tamanho em bytes. Salve qualquer uma como PNG, ou todas num ZIP, sem procurar outro site.
O iOS coloca ícones de toque transparentes sobre preto. Por isso o apple-touch-icon sempre é preenchido com a sua cor de fundo e fica quadrado, já que o iOS aplica a própria máscara arredondada; os ícones do navegador mantêm a transparência.
Um SVG ou um PNG quadrado de pelo menos 512 px dá o resultado mais nítido. Uma imagem não quadrada é centralizada em vez de cortada, e uma imagem bitmap menor que 512 px mostra um aviso com o tamanho real, porque o ícone Android de 512 px seria uma ampliação.
A geração roda de novo cerca de 300 ms após cada mudança. Observe as abas clara e escura e o zoom de 4×: traços finos e textos pequenos somem em 16 px. Um pouco de margem ajuda logos largos; o arredondamento só vale para os ícones do navegador e do Android.
O caminho vai para cada tag link e cada src do manifest. Se os arquivos ficarem em /assets/icons/, digite isso primeiro, baixe o ZIP e cole o HTML no head das suas páginas.
favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png e site.webmanifest, mais favicon.svg quando a origem é SVG. Tudo fica na raiz do ZIP, pronto para ir ao lado da página inicial.
O ICO pode combinar 16, 24, 32, 48, 64, 128 e 256 px, guardados como dados PNG que todos os navegadores atuais e o Windows leem. Serve para converter PNG para ICO, não só para criar favicon completo.
O formato é reconhecido pelos bytes, não pela extensão, e os avisos mostram a largura e a altura reais. Um SVG nunca é marcado como pequeno demais, porque escala sem perda.
As tags link, a meta theme-color e a lista de ícones do manifest saem do mesmo caminho e das mesmas cores, então o HTML nunca aponta para um arquivo que não está no ZIP.
Para navegadores e celulares atuais: um favicon.ico com 16, 32 e 48 px, PNG de 16 e 32 px, um apple-touch-icon de 180 px e ícones de 192 e 512 px listados no site.webmanifest. É exatamente o que este gerador de favicon coloca no ZIP.
Parta de um logo quadrado ou de um SVG, solte aqui, confira a prévia em 16 px, defina o caminho e baixe o ZIP com o HTML. Tudo acontece no navegador, sem cadastro.
O favicon.ico de preferência na raiz do site, porque alguns navegadores e leitores de feed pedem /favicon.ico mesmo sem tag link. Os demais arquivos podem ficar numa subpasta, desde que o caminho informado esteja certo.
Solte o PNG, escolha os tamanhos que devem ir dentro do ICO e clique em Baixar favicon.ico. Você recebe um ICO de verdade com vários tamanhos, não um PNG renomeado.
Os dois. O ICO atende navegadores antigos e robôs que pedem /favicon.ico direto; os navegadores modernos usam PNG e SVG. Aqui os dois saem da mesma imagem.
O Google usa o favicon do site nos resultados e pede um ícone quadrado com lado múltiplo de 48 px. O ICO padrão inclui 48 px e os ícones de 192 e 512 px também são múltiplos; publique os arquivos e aguarde o Google rastrear a página de novo.
Faltou algum tamanho ou plataforma?
Solte seu logo no gerador de favicon, confira a aba de 16 px no fundo claro e no escuro, e leve o ZIP e as tags do head para o seu site.
Guarde o arquivo original do logo para edições futuras.