Como criar um favicon para o seu site: guia de arquivos ICO
Esse pequeno ícone na guia do navegador funciona mais do que você imagina. Os favicons aparecem em guias, favoritos, histórico do navegador, telas iniciais de dispositivos móveis e atalhos na área de trabalho. Um favicon ausente faz com que seu site pareça inacabado. Uma boa opção o torna instantaneamente reconhecível entre dezenas de guias abertas. A criação de um leva cerca de cinco minutos quando você conhece os tamanhos e formatos necessários.
O que é um favicon?
Um favicon (abreviação de “ícone favorito”) é o pequeno ícone associado ao seu site. Os navegadores o exibem na barra de guias ao lado do título da página, na lista de favoritos e no histórico do navegador. Os dispositivos móveis o utilizam quando os usuários adicionam seu site à tela inicial. Os mecanismos de pesquisa podem exibi-lo nos resultados. É um dos menores elementos visuais do seu site, mas um dos mais vistos.
Tamanhos de favicon obrigatórios
Contextos diferentes exibem seu favicon em tamanhos diferentes. Para cobrir todos os casos de uso, você precisa de várias versões:
16x16 pixels — Guias do navegador. Este é o tamanho clássico do favicon e a menor versão que você precisa. 32x32 pixels — Atalhos da barra de tarefas, guias mais recentes do navegador em telas de alto DPI. 48x48 pixels — Atalhos da área de trabalho do Windows e ícones de sites.
180x180 pixels — Ícone de toque da Apple. É isso que o iOS usa quando alguém adiciona seu site à tela inicial. É o tamanho móvel mais importante. 192x192 pixels — Ícone da tela inicial do Android Chrome e ícone do PWA (Progressive Web App). 512x512 pixels — Telas iniciais do PWA e caixa de diálogo de instalação do Android.
Formatos de favicon explicados
Formato da OIC: O formato favicon original e o único que funciona em qualquer lugar — incluindo navegadores muito antigos e o Internet Explorer. Um arquivo ICO pode agrupar vários tamanhos em um único arquivo (normalmente 16x16, 32x32 e 48x48). Para máxima compatibilidade, todo site deve ter um arquivo favicon.ico no diretório raiz. O Conversor PNG para ICO em iformat.io torna a criação de um simples.
Formato PNG: A alternativa moderna. Os favicons PNG são mais simples de criar (uma imagem por arquivo) e suportam transparência total. Todos os navegadores modernos suportam favicons PNG. A desvantagem é que você precisa de arquivos separados para cada tamanho, e navegadores muito antigos podem não suportá-los.
Formato SVG: A mais nova opção. Como SVG é um formato vetorial, um único arquivo se adapta perfeitamente a qualquer tamanho — sem pixelização, sem vários arquivos. Os favicons SVG são suportados pelo Chrome, Firefox e Edge, mas não pelo Safari (no início de 2026). Os favicons SVG também suportam adaptação ao modo escuro por meio de consultas de mídia CSS, o que PNG e ICO não podem fazer.
Etapa 1: projete seu ícone
A regra mais importante do design de favicon: mantenha a simplicidade. Seu ícone será exibido com tamanho de 16x16 pixels – ou seja, uma grade de apenas 256 quadrados. Detalhes finos, linhas finas e texto pequeno ficarão ilegíveis nesse tamanho. Os melhores favicons são formas ousadas e reconhecíveis com alto contraste.
Use seu logotipo se ele funcionar em tamanhos pequenos. Muitas empresas usam apenas a primeira letra do nome ou uma versão simplificada do logotipo. Evite fotografias — elas se tornam manchas irreconhecíveis em 16x16. Cores sólidas e formas geométricas simples funcionam melhor. Teste seu design visualizando-o em 16x16 pixels antes de enviá-lo.
Passo 2: Crie o arquivo ICO
Comece com uma imagem PNG quadrada de pelo menos 512x512 pixels. Uma fonte maior oferece resultados mais limpos quando reduzida. Use o Conversor PNG para ICO para gerar seu arquivo ICO. O conversor cria um ICO de vários tamanhos contendo versões 16x16, 32x32 e 48x48 — tudo a partir de sua imagem de origem única.
Se a imagem de origem for um JPG (como um logotipo exportado de uma ferramenta de design), use o Conversor de JPG para ICO em vez de. Para logotipos vetoriais em formato SVG, o Conversor de SVG para ICO produz os resultados mais nítidos porque renderiza o vetor em cada tamanho de destino.
Etapa 3: adicione o código HTML
Coloque seu arquivo favicon.ico no diretório raiz do seu site. A maioria dos navegadores o encontrará automaticamente em /favicon.ico, mesmo sem uma tag HTML. Mas para controle explícito e suporte a todos os formatos, adicione essas tags dentro do seu HTML
<head> seção:<link rel="icon" type="image/x-icon" href="/favicon.ico"> — Favicon clássico da ICO. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — Favicon PNG para navegadores modernos. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — Ícone da tela inicial dos dispositivos Apple.Etapa 4: gerar ícone do Apple Touch e ícones do Android
O ícone Apple Touch (PNG 180x180) é exibido quando usuários iOS adicionam seu site à tela inicial. Crie uma versão PNG de 180x180 pixels do seu ícone com algum preenchimento nas bordas – o iOS aplicará seus próprios cantos arredondados. Nomeie-o como apple-touch-icon.png e faça referência a ele em seu HTML.
Para Android e Progressive Web Apps, você precisa de ícones PNG de 192x192 e 512x512. Eles normalmente são referenciados em um arquivo de manifesto de aplicativo da web (manifest.json ou site.webmanifest). O arquivo de manifesto também permite definir o nome do aplicativo, a cor do tema e o modo de exibição para quando os usuários instalarem seu site como um aplicativo.
Erros comuns de favicon
Usando muitos detalhes: Um logotipo complexo com linhas finas e texto pequeno fica ótimo em 200px, mas se torna uma mancha ilegível em 16px. Simplifique implacavelmente. Esquecendo o modo escuro: Se o seu favicon usar uma cor escura em um fundo transparente, ele ficará invisível em navegadores com barras de guias escuras. Considere adicionar uma borda clara ou usar favicons SVG com CSS de modo escuro.
Não testando em tamanho real: Sempre visualize seu favicon em 16x16 em uma guia real do navegador. O que fica bem em sua ferramenta de design com zoom de 400% pode não funcionar em tamanho real. Ignorando o arquivo ICO: Embora os favicons PNG funcionem em navegadores modernos, ter um favicon.ico em seu diretório raiz garante compatibilidade com todos os navegadores e rastreadores, incluindo sistemas legados.
Testando seu favicon
Depois de enviar seus arquivos favicon e adicionar o HTML, teste em vários navegadores: Chrome, Firefox, Safari e Edge, no mínimo. Verifique se o ícone aparece corretamente na guia, nos favoritos (marque uma página e verifique) e no celular (adicione à tela inicial no iOS e no Android). Os caches do navegador podem ser agressivos com os favicons – se você não vir o novo ícone, tente limpar o cache ou abrir uma janela anônima.
Se você precisar ir na outra direção – extrair ícones de um arquivo ICO existente – o Conversor de ICO para PNG extrai as imagens incorporadas. Isso é útil quando você precisa atualizar um favicon, mas possui apenas o arquivo ICO e não a arte original.
Um favicon adequado leva cinco minutos para ser criado, mas dá ao seu site uma aparência profissional e sofisticada. Comece com um design simples e arrojado, gere seu arquivo ICO com um conversor online, adicione as tags HTML e teste em vários navegadores. Seu site parecerá completo – e seus usuários poderão encontrar sua guia entre as dezenas que abriram.