Gerador de favicon — ICO, PNG e ícone Apple Touch

Os arquivos que um site realmente precisa

A lista encolheu bastante. Há alguns anos o conselho padrão chegava a uma dúzia de arquivos e vinte linhas de marcação. Hoje quatro arquivos cobrem praticamente tudo o que se usa.

• favicon.ico — ainda é o cavalo de batalha. Os navegadores pedem /favicon.ico na raiz do site por conta própria, sem nenhum HTML mandando, então ele cobre todos os casos em que a sua marcação falta ou não é interpretada. Este aqui guarda as versões de 16, 32 e 48 px.
• apple-touch-icon.png de 180 × 180 — o que o Safari no iOS usa quando alguém adiciona seu site à tela de início. O iOS arredonda os cantos sozinho, então entregue um quadrado inteiro.
• icon-192.png e icon-512.png — referenciados pelo manifesto de web app e usados pelo Android quando um site é instalado ou fixado.
• icon.svg — opcional, e aqui só é gerado no modo de letra. Navegadores modernos aceitam um favicon em SVG e ele continua nítido em qualquer tamanho.

Por que um ICO guarda mais de uma imagem

ICO não é bem um formato de imagem, é um contêiner. Seis bytes de cabeçalho, depois uma entrada de diretório de dezesseis bytes para cada imagem dizendo que tamanho ela tem e em que ponto do arquivo começa, e depois os dados das imagens. Desde o Windows Vista essas entradas podem ser arquivos PNG completos em vez de bitmaps crus, que é o que esta ferramenta escreve. O sistema operacional ou o navegador então escolhe o tamanho embutido que serve para o lugar onde vai desenhar: 16 px em uma aba, 32 px na barra de favoritos, 48 px em um atalho da área de trabalho.

Uma peculiaridade do formato aparece no código: uma dimensão é guardada em um único byte, e 256 é escrito como zero. Esse é o teto rígido do formato, e o motivo de os ícones grandes morarem em arquivos PNG.

Por que seu logo não vai sobreviver a 16 pixels

Um ícone de 16 × 16 tem 256 pixels no total. Uma marca escrita vira textura, um contorno de um pixel some por completo, e qualquer coisa com mais de duas ou três formas vira uma mancha. Os logos que funcionam como favicon são os que já eram simples: uma única letra, um símbolo, uma silhueta.

Redimensionar ajuda só até certo ponto. Os navegadores reamostram em um passo só, o que é rápido e produz bordas suaves e serrilhadas; esta ferramenta reduz a imagem pela metade repetidamente até chegar perto do tamanho final e dá o último passo a partir dali, o que preserva as bordas visivelmente melhor. Mesmo assim não dá para competir com um ícone de 16 px desenhado à mão, pixel por pixel, com os traços alinhados à grade. Se o seu favicon importa de verdade, desenhe o de 16 px separadamente e use esta ferramenta para o resto.

O que esta ferramenta não faz

Não há download em zip. Cada arquivo aqui está a um clique, e juntar todos em um só significaria carregar uma biblioteca de compressão no seu navegador para montar um zip que seria desfeito assim que chegasse do outro lado.

A opção SVG existe apenas no modo de letra, e ela referencia uma fonte do sistema pelo nome. Isso significa que pode ser exibida com outra tipografia na máquina de outra pessoa. Para qualquer uso que não seja provisório, abra o arquivo em um editor vetorial e converta o texto em curvas.

Ela também não gera o ícone de máscara monocromático que versões antigas do Safari usavam para abas fixadas, e não escreve nada no seu servidor. Você ainda precisa enviar os arquivos, para a raiz do site, e referenciá-los com caminhos absolutos como o trecho de código faz.

Mais uma limitação que vale conhecer: um SVG de origem sem os atributos width e height não tem tamanho intrínseco, e os navegadores discordam sobre o que supor. Se o seu logo em SVG sair cortado ou minúsculo, abra o arquivo, adicione dimensões explícitas ao elemento raiz e tente de novo.

Por que o favicon novo não aparece

Porque está em cache, quase sempre. Os navegadores guardam favicons em cache de forma agressiva e em um armazenamento separado do cache normal das páginas, então uma recarga forçada da página costuma deixar o ícone antigo no lugar. Carregue /favicon.ico direto em uma aba e recarregue essa aba, ou teste em uma janela privada para confirmar que o arquivo novo está mesmo sendo servido.

A outra surpresa comum é o modo escuro. Um logo escuro em fundo transparente fica invisível contra um tema de navegador escuro, e os navegadores não vão trocar o ícone por você. Duas saídas: dê ao ícone um fundo sólido para que ele nunca se misture, ou use um favicon em SVG com uma media query prefers-color-scheme dentro dele, que os navegadores de desktop atuais respeitam.

Última atualização 19 de setembro de 2026