Imagem para Favicon: Crie Ícones de Site a Partir de Qualquer Imagem

Q: Como referenciar favicons em HTML?

Com tags apontando para cada tamanho e formato, mais para iOS. O navegador escolhe a melhor correspondência. Um conjunto completo de tags de link cobre todas as plataformas.

Última atualização: June 28, 2026. O suporte de favicon em navegadores evolui; os tamanhos e formatos centrais aqui cobrem o cenário atual.

Um favicon é o pequeno ícone que aparece na aba do navegador, em uma lista de favoritos e na tela inicial de um telefone quando alguém salva seu site. Converter uma imagem em um favicon significa criar os tipos de arquivo certos nos tamanhos corretos para que o ícone pareça nítido onde quer que apareça — desde uma aba de navegador de 16 pixels até um ícone Apple Touch de 180 pixels. Este guia cobre os tamanhos esperados por cada plataforma, os formatos de arquivo a serem gerados e como manter o ícone reconhecível em tamanhos minúsculos.

Resposta rápida: como criar um favicon a partir de uma imagem?

Comece com uma imagem fonte quadrada (ou recorte para quadrado usando o image cropper), reduza até os tamanhos padrão do favicon (16px, 32px, 180px, 512px) e exporte como PNG mais um arquivo ICO para navegadores legados. Referencie-os no <head> do seu HTML com as tags de link apropriadas. Teste a versão de 16px em uma aba do navegador, porque se o ícone não for reconhecível nesse tamanho, nenhuma quantidade de versões maiores irá corrigir isso. Mantenha também a versão SVG se o logotipo for vetorial, para renderização nítida em telas high-DPI.

Quais tamanhos um favicon precisa?

Diferentes contextos exibem o favicon em diferentes tamanhos, e fornecer os tamanhos certos mantém ele nítido em todos os lugares.

Tamanho	Arquivo	Usado para
16x16	ICO / PNG	Aba do navegador (legado)
32x32	ICO / PNG	Aba do navegador (retina)
180x180	PNG	Ícone Apple Touch
192x192	PNG	Tela inicial Android
512x512	PNG	PWA / splash
Qualquer	SVG	Navegadores modernos, high-DPI

A versão de 16px é a mais importante — é o que a maioria das pessoas vê em uma aba.
O ícone Apple Touch precisa de 180px para exibição nítida na tela inicial do iOS.
SVG serve aos navegadores modernos em qualquer resolução sem múltiplos arquivos.
Um ICO pode agrupar vários tamanhos para suporte legado.

Como desenhar um favicon que funcione em 16px?

O desafio de um favicon é que ele deve ser reconhecível em 16 pixels, o que é minúsculo. Detalhes que parecem bons em 512px desaparecem em 16px, então o design deve ser simples.

Use uma forma única e ousada — uma letra, um símbolo de logotipo, um ícone simples.
Evite linhas finas e texto pequeno — eles desaparecem em 16px.
Use alto contraste para que a forma se destaque contra o fundo da aba.
Teste a versão de 16px no tamanho real antes de publicar.

Um erro comum é usar o logotipo completo com texto. Em 16px, o texto é ilegível, então o favicon parece uma mancha borrada. A solução é extrair o elemento mais reconhecível — o ícone ou a primeira letra — e usá-lo como favicon. O SVG to PNG guide cobre a exportação de marcas vetoriais nos tamanhos que você precisa.

Quais formatos de arquivo devo gerar?

Os favicons abrangem vários formatos porque o suporte do navegador evoluiu ao longo do tempo, e cobri-los todos garante que o ícone funcione em qualquer lugar.

ICO — o formato legado, agrupa múltiplos tamanhos, suportado por todos os navegadores.
PNG — o padrão moderno, um arquivo por tamanho.
SVG — vetorial, escala para qualquer tamanho, suportado por navegadores modernos.
Apple Touch PNG — especificamente 180x180, para ícones de tela inicial do iOS.

Formato	Quando usar
ICO	Suporte legado de navegador, agrupa tamanhos
PNG	Navegadores modernos, arquivos por tamanho
SVG	Navegadores modernos, arquivo único escalável
Apple Touch PNG	Tela inicial do iOS

Gere um ICO para compatibilidade legada, PNGs em cada tamanho para suporte amplo e um SVG se a fonte for vetorial. O image converter lida com a geração de formatos, e o image cropper obtém o quadrado da fonte primeiro.

Como referenciar favicons em HTML?

Os arquivos gerados devem ser referenciados no <head> da página para que os navegadores os encontrem. As tags de link informam ao navegador qual arquivo usar para qual contexto.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

O ICO cobre navegadores legados com tamanhos agrupados.
O SVG serve aos navegadores modernos em qualquer resolução.
O ícone Apple Touch cobre salvamentos na tela inicial do iOS.
Coloque os arquivos na raiz do site para máxima compatibilidade.

O Mozilla favicon guide documenta as tags de link e o comportamento do navegador, e o Web.dev app icons guide cobre o padrão de ícone mascarável para Android. Teste o resultado em uma aba real do navegador e na tela inicial do telefone após implantar, porque peculiaridades de renderização só aparecem nos contextos reais.

Desenvolvendo favicons para modo claro e escuro

Navegadores e sistemas operacionais modernos alternam entre modo claro e escuro, e um favicon que fica ótimo em uma aba clara pode desaparecer em uma aba escura. Um PNG com fundo transparente ou um SVG com cores adaptativas lida com ambos os contextos, porque o ícone se adapta ao chrome circundante em vez de carregar seu próprio fundo.

Desafio do modo	Solução
Ícone escuro desaparece em aba escura	Adicionar um contorno sutil ou usar transparência
Ícone claro desaparece em aba clara	O mesmo — contorno ou cor adaptativa
Baixa legibilidade em 16px	Simplificar a forma, aumentar o contraste

Para favicons SVG, você pode usar a media query prefers-color-scheme dentro do SVG para servir cores diferentes para contextos claros e escuros, que é a solução mais limpa. Para PNG, um fundo transparente com uma forma que tenha contraste interno suficiente funciona aceitavelmente em ambos. O objetivo é que o favicon seja legível em uma aba independentemente de o usuário usar modo claro ou escuro, o que está se tornando cada vez mais o padrão e não a exceção.

Erros comuns de favicons

Detalhe demais — o ícone é irreconhecível em 16px. Simplifique.
Fonte não quadrada — recorte para quadrado primeiro ou o ícone distorce.
Falta do ícone Apple Touch — os salvamentos do iOS mostram uma captura de tela genérica em vez disso.
Sem SVG — telas high-DPI renderizam um PNG borrado em vez de um vetor nítido.
Esquecer de testar em 16px — o tamanho que a maioria das pessoas vê é aquele mais frequentemente negligenciado.

O favicon é pequeno, mas aparece onde quer que seu site seja representado — abas, favoritos, telas iniciais, resultados de pesquisa. Um ícone nítido e reconhecível em todos os tamanhos reforça a marca à primeira vista, enquanto um favicon borrado ou ausente sinaliza falta de polimento. Dedique tempo para acertar a versão de 16px, gerar o conjunto completo de tamanhos e formatos, e o ícone representará o site de forma limpa onde quer que apareça. O investimento é pequeno — apenas uma tarde de trabalho de design e exportação — mas compensa sempre que um usuário vê seu site em uma aba, favorito ou tela inicial, o que é muito mais frequentemente do que a maioria das equipes percebe.

Perguntas frequentes

Quais tamanhos um favicon precisa?

Um conjunto moderno: 16×16, 32×32, 48×48 (clássico), além de 180×180 (ícone Apple Touch) e 192×192 / 512×512 (Android). Uma imagem mestre gera o conjunto completo. O navegador escolhe o tamanho certo por contexto.

Como desenhar um favicon que funcione em 16px?

Mantenha-o simples — uma forma ousada, alto contraste, sem detalhes finos ou texto. Em 16px, qualquer coisa intrincada vira uma mancha. Teste o design em 16px antes de se comprometer; se não for legível ali, é muito complexo.

Quais formatos de arquivo um favicon deve usar?

ICO para compatibilidade legado, PNG para navegadores modernos e ícones Apple/Android, e SVG para uma versão independente de resolução onde suportado. Gere o conjunto completo; um formato não cobre todos os dispositivos.

Como referenciar favicons em HTML?

Com tags <link rel="icon"> apontando para cada tamanho e formato, mais <link rel="apple-touch-icon"> para iOS. O navegador escolhe a melhor correspondência. Um conjunto completo de tags de link cobre todas as plataformas.

Posso usar uma imagem para todos os tamanhos do favicon?

Sim — um único mestre quadrado (512×512 ou maior) gera o conjunto completo, de 16×16 a 512×512. Desenhe o mestre para ser legível em 16px (uma forma ousada) para que o menor tamanho ainda funcione. Um mestre, muitos tamanhos.

Como testar um favicon?

Abra o site em uma aba do navegador e verifique o ícone em 16px (tamanho da aba), 32px (favoritos) e 180px (Apple touch). Se a versão de 16px não for legível, o design é muito complexo — simplifique para uma forma ousada. Favicons são pequenos, mas aparecem em todos os lugares, então um ícone nítido e reconhecível em todos os tamanhos reforça a marca à primeira vista.

O que é um arquivo ICO?

Um formato de container legado que contém uma ou mais imagens raster em diferentes tamanhos, usado para favicons em navegadores mais antigos (notavelmente o Internet Explorer antigo). Navegadores modernos usam PNG e SVG, então o ICO é principalmente uma camada de compatibilidade retroativa. Gere um ICO junto com seu conjunto PNG/SVG para que todo navegador, por mais antigo que seja, receba um ícone.

Imagem para Favicon: Crie Ícones de Site a Partir de Qualquer Imagem

Resposta rápida: como criar um favicon a partir de uma imagem?

Quais tamanhos um favicon precisa?

Como desenhar um favicon que funcione em 16px?

Quais formatos de arquivo devo gerar?

Como referenciar favicons em HTML?

Desenvolvendo favicons para modo claro e escuro

Erros comuns de favicons