← Todos os posts

Como criar um favicon a partir de uma imagem (ICO + PNG, todos os tamanhos)

2026-07-27

Resposta rápida: Para criar um favicon a partir de uma imagem, abra o Gerador de Favicon do ToolKoala, solte uma imagem quadrada e baixe. Você recebe um favicon.ico (contendo 16, 32 e 48px) mais PNGs avulsos em 16, 32, 48, 180, 192 e 512px, e um bloco de tags HTML <link> pronto para colar. É grátis, e tudo roda no seu navegador — a imagem nunca é enviada. Eu construí isso na semana em que enjoei de sites de favicon que exigem login para você baixar um ícone de 16 pixels.

Por que você precisa de mais de um tamanho de favicon

Antigamente um favicon era um único .ico de 16×16 e pronto. Não mais. Lugares diferentes mostram seu ícone em tamanhos diferentes:

  • 16 / 32 / 48px — o clássico ícone de aba do navegador e de favorito. Eles vivem dentro do favicon.ico.
  • 180px — o Apple Touch Icon, usado quando alguém adiciona seu site à tela inicial do iPhone.
  • 192 / 512px — ícones Android e PWA, usados na instalação na tela inicial e no alternador de apps.

Publique só um ícone de 16px e seu site fica nítido numa aba, mas borrado no instante em que alguém salva na tela do celular. Esta ferramenta gera o conjunto inteiro a partir de uma imagem-fonte, então você não precisa pensar nisso.

Como criar seu favicon

  1. Abra o Gerador de Favicon do ToolKoala e solte sua imagem.
  2. Ele renderiza instantaneamente pré-visualizações em todos os tamanhos — de 16 até 512 — para você ver como seu ícone se sai quando fica pequenininho.
  3. Baixe o que precisar:
    • favicon.ico — o ícone multirresolução (16 + 32 + 48) para a aba do navegador.
    • Todos os PNGs — um clique pega cada tamanho como um PNG separado.
    • Ou clique em qualquer pré-visualização individual para baixar só aquele tamanho.
  4. Copie o trecho de HTML que ele fornece e cole no <head> da sua página.

O trecho já vem preenchido com os atributos rel, type e sizes corretos:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

Coloque os arquivos na raiz do seu site (ou onde quer que o href aponte), cole as tags, e pronto.

Dicas para um ícone que se lê bem em 16 pixels

  • Comece quadrado e simples. Em 16×16 só cabe uma forma marcante ou uma única letra — não o seu logo completo com slogan. Se o seu logo é detalhado, crie uma versão "marca de ícone" simplificada só para isso.
  • Alimente com uma fonte grande. Envie pelo menos 512px para os ícones grandes de PWA continuarem nítidos; a ferramenta reduz, não consegue inventar detalhe.
  • Alto contraste ganha. O ícone fica sobre o chrome do navegador e papéis de parede de celular que você não controla. Contraste forte mantém ele visível em qualquer lugar.
  • Confira as pré-visualizações pequenas. A ferramenta mostra as versões de 16 e 32px com precisão de pixel — se ficar uma bagunça nesse tamanho, simplifique a arte antes de publicar.

Limites honestos

A ferramenta desenha sua imagem em telas quadradas, então uma fonte não quadrada fica espremida — corte para um quadrado primeiro (tente cortar) para um resultado limpo. Ela também não adiciona cantos arredondados ou preenchimento para você; o que você envia é o que é redimensionado. E ela gera o conjunto moderno padrão — se você precisa de todo ladrilho legado do Microsoft e SVG de aba fixada do Safari que existe por aí, um gerador mais pesado cobre esses casos extremos. Para 99% dos sites, o conjunto ICO + PNG daqui é exatamente o que os navegadores pedem de verdade.

Perguntas frequentes

Como faço um favicon a partir de uma imagem? Abra um gerador de favicon baseado em navegador como o do ToolKoala, solte uma imagem quadrada e baixe o favicon.ico mais os PNGs em todos os tamanhos. Depois cole as tags HTML fornecidas no <head> da sua página.

Que tamanhos e formatos eu recebo? Um favicon.ico contendo 16, 32 e 48px, mais PNGs avulsos em 16, 32, 48, 180 (Apple Touch), 192 e 512px (Android/PWA).

Ainda preciso de um arquivo .ico, ou só dos PNGs? Os dois. favicon.ico é o mais compatível para abas de navegador, enquanto os PNGs maiores cobrem os ícones de tela inicial do Apple Touch e Android/PWA. Esta ferramenta te dá os dois, então você fica coberto em todo lugar.

Minha imagem é enviada a algum servidor? Não. O favicon é gerado no seu navegador usando canvas — sua imagem nunca sai do seu dispositivo.

Minha imagem original não é quadrada. Vai ficar certo? Uma imagem não quadrada é esticada para virar um quadrado. Corte para uma proporção 1:1 primeiro para um ícone limpo.

— Milo 🐨