Gerador de Favicon
Envie uma imagem, baixe todos os tamanhos de favicon — PNGs de 16 a 512 px mais as tags HTML. Funciona inteiramente no seu navegador.
1.150 visualizações
Não foi possível ler a imagem — tente PNG/JPG/WebP
Os Tamanhos Que Importam em 2026
Cada dispositivo e contexto espera um tamanho de favicon diferente, porque um favicon não é um único arquivo — é uma família de arquivos. As abas do navegador usam PNGs minúsculos de 16×16 e 32×32 pixels. O "Adicionar à Tela de Início" do iOS usa um apple-touch-icon de 180×180. O Android e os PWAs instalados buscam ícones de 192×192 e 512×512 pixels no manifesto do aplicativo web para a arte da tela inicial e da tela de abertura. Uma única imagem de origem não pode atender a todos esses casos diretamente — um logotipo de 512 px espremido direto em uma aba de 16 px perde quase todo o seu detalhe, e um ícone de 16 px esticado até 512 px fica borrado e quadriculado. Por isso a abordagem correta é renderizar uma origem em alta resolução para cada tamanho-alvo individualmente, redesenhando os pixels do zero em cada tamanho em vez de escalar uma saída a partir de outra.
É exatamente isso que esta ferramenta faz: ela carrega sua imagem de origem em um canvas HTML no seu navegador e a redimensiona para os seis tamanhos padrão — 16, 32, 48, 180, 192 e 512 pixels — cada um desenhado diretamente a partir do original, e então entrega os PNGs correspondentes mais as tags <link> para colar no <head> do seu site. Nada é enviado; o redimensionamento acontece com a Canvas API no seu próprio dispositivo.
Projetando para o Menor Tamanho
Como tanto detalhe se perde em 16 px, o design de favicon funciona de trás para frente, partindo do menor tamanho, não do maior. Recorte para o símbolo da logo em vez de uma marca nominativa completa — o texto vira uma mancha ilegível abaixo de cerca de 24 px. Mantenha contraste forte contra barras de abas claras e escuras, já que os navegadores alternam entre temas. Uma cor de fundo sólida geralmente fica melhor do que a transparência nos tamanhos menores, onde alguns pixels de borda semitransparentes podem parecer ruído. Muitas marcas mantêm uma versão simplificada de "ícone de aplicativo" da sua logo — uma única letra, inicial ou símbolo — justamente porque a logo completa não sobrevive ao teste dos 16 px.
Também ajuda entender o arquivo de manifesto que une os ícones de 192 e 512 pixels para sites instaláveis: o manifesto do aplicativo web (manifest.json) referencia esses dois tamanhos por URL para que os instaladores de PWA do Android e desktop saibam qual ícone buscar para a tela inicial e o alternador de aplicativos. Sites que pulam os ícones do manifesto continuam totalmente funcionais — as abas do navegador e os ícones da tela inicial do iOS funcionam de forma independente — mas o próprio prompt de instalação pode recorrer a um ícone genérico ou deixar de oferecer a instalação.
Perguntas Frequentes
Ainda preciso de um arquivo .ico?
Raramente. Todo navegador moderno aceita favicons PNG declarados através do atributo sizes em uma tag link. Manter um /favicon.ico na raiz do seu site só ajuda agentes de usuário muito antigos e ferramentas que solicitam diretamente esse caminho legado fixo.
Que imagem devo enviar?
Uma imagem quadrada, idealmente de 512 px ou maior, PNG ou um raster exportado de SVG com o símbolo centralizado e espaçamento suficiente ao redor. Imagens não quadradas são recortadas ao centro em um quadrado antes do redimensionamento, para que nada fique esticado.
Por que meu ícone fica borrado ou embaçado em 16 px?
Dezesseis pixels fisicamente não conseguem conter detalhes finos — traços finos, gradientes e textos pequenos se dissolvem em uma mancha. Simplifique o símbolo de origem, aumente o contraste ou projete uma versão dedicada para tamanhos pequenos se sua logo completa não sobreviver ao menor ícone de aba.
Qual é a diferença entre os ícones de 192 px e 512 px?
Ambos alimentam os manifestos do Android e PWA: o de 192 px é usado para o ícone da tela inicial em densidade normal, enquanto o de 512 px é usado para telas de alta densidade e a tela de abertura exibida enquanto um PWA carrega — o Android escolhe o que se encaixa no contexto.
Preciso adicionar todos os tamanhos, ou apenas alguns?
Para um site moderno, 32 px mais o apple-touch-icon de 180 px cobre a grande maioria dos visitantes. Adicione os ícones de manifesto 192/512 px apenas se o site for instalável como PWA; os tamanhos de 16 e 48 px ajudam principalmente em contextos legados.
Ferramentas Semelhantes
Reportar um Problema
Gerador de Favicon
Comentários
Ainda não há comentários — seja o primeiro a escrever um!