O que é Gerador de favicons multi-tamanho?

Faça upload de uma imagem — ou digite de 1 a 3 letras ou um emoji — e obtenha todos os tamanhos padrão, de um ICO 16×16 a um ícone de App Store 1024×1024, além de um favicon.svg escalável. Inclui Apple Touch, Android Chrome, MS Tile e aba fixada do Safari. Baixe um a um ou todos juntos como ZIP.

Comece pelo seu próprio logo ou monte um ícone rápido com algumas letras ou um emoji, com suas cores e sua fonte. O gerador produz 17 arquivos PNG separados, cobrindo os tamanhos clássicos de favicon (16, 32, 48, 64, 96, 128, 256), ícones Apple Touch (152, 167, 180), o ícone de App Store 1024, Android Chrome (192, 384), MS Tile (144, 150, 310) e o PWA 512. Filtre a grade por plataforma, escolha a forma de saída quadrada, arredondada ou circular e confira o favicon em abas claras e escuras antes de baixar. Cada ZIP ainda inclui um favicon.ico multirresolução, um favicon.svg escalável, um snippet HTML pronto para colar e um manifest.json com maskable purpose nos tamanhos do Android; adicione um nome e um nome curto para torná-lo instalável como PWA.

Como usar

1. Faça upload de uma imagem quadrada em alta resolução (pelo menos 512×512px) como origem, ou troque para o modo de texto e digite de 1 a 3 letras ou um emoji para criar uma na hora.
2. Revise todos os tamanhos gerados na grade. Ative ou desative conforme as plataformas que você precisa.
3. Baixe tamanhos avulsos, pegue um favicon.ico multirresolução, ou clique em «Baixar tudo» para receber um ZIP com todos os tamanhos selecionados, o pacote ICO, o snippet HTML e o manifesto.

Quando usar

• Lançar um site novo e precisar de cobertura de favicon em todos os navegadores e SOs.
• Rebranding: regerar todos os ícones de PWA e tela inicial a partir do novo logo.
• Adicionar suporte a adicionar à tela inicial para o Android renderizar um ícone maskable.

Resultado

Uma agência web faz upload do novo logotipo de um cliente para renovação de marca. Obtém 12 tamanhos para desktop, iOS Safari, Android Chrome, tiles do Windows e ícones de manifesto PWA, prontos para uso.

Perguntas frequentes

Qual o tamanho ideal da imagem de origem?

Mínimo 512x512 pixels, quadrada, com o logo centralizado e um pouco de margem. Abaixo disso o ícone PWA 512 fica embaçado. Origem vetorial (SVG rasterizado em PNG de 1024) funciona ainda melhor.

Por que há favicons PNG e ICO?

Navegadores modernos usam PNG em vários tamanhos via link rel='icon' e cada vez mais preferem um único SVG escalável. O arquivo .ico continua necessário para navegadores antigos do Windows, várias hospedagens e alguns fluxos de sites fixados. Este gerador entrega os três: PNG em todos os tamanhos modernos, um favicon.svg escalável e um favicon.ico que agrupa os quadros de 16, 32 e 48px.

O que é um ícone maskable e por que o Android precisa dele?

O Android recorta ícones da tela inicial em círculo, squircle ou quadrado arredondado conforme o launcher. Um ícone maskable tem uma zona segura central (~80% da área) para que partes importantes do logo nunca sejam cortadas. Adicione ~10% de margem ao redor da origem.

Onde colocar os arquivos gerados?

Coloque cada PNG na raiz public do site (ou /static), cole o snippet HTML no head da página e referencie o manifest.json. Apple Touch e favicon vão no head HTML; os ícones PWA são referenciados pelo manifest.

Para que servem as opções de fundo e padding?

Logos transparentes geralmente ficam bons em abas de navegador mas ficam estranhos quando o Android ou iOS adiciona seu retângulo arredondado atrás. Combinar um fundo sólido com 8-12% de padding garante renderização previsível em qualquer launcher.

Ferramentas relacionadas