Favicons modernos precisam estar dis­po­ní­veis em vários tamanhos e formatos, de 16×16 px para na­ve­ga­do­res a 512×512 px para PWAs. PNG e SVG estão subs­ti­tuindo cada vez mais o antigo formato ICO, definido no manifest.json para apli­ca­ti­vos web.

Para que serve um favicon?

Um favicon (uma junção de “favorite” e “icon”) é um pequeno gráfico que aparece acima da barra de endereços nas abas do navegador. É uma boa ideia que todo site adicione um favicon. Ele melhora o re­co­nhe­ci­mento da marca, dá ao site uma aparência mais pro­fis­si­o­nal e pode até melhorar o de­sem­pe­nho do ponto de vista de SEO.

Favicons podem re­pre­sen­tar o logotipo de uma empresa ou marca, mas, como há li­mi­ta­ções rigorosas de tamanho para favicon, ge­ral­mente usam apenas uma parte ou uma versão sim­pli­fi­cada do logotipo. Em dis­po­si­ti­vos móveis, esses pequenos gráficos também são usados como ícones de toque.

Qual tamanho de favicon é re­co­men­dado?

Di­fe­ren­tes na­ve­ga­do­res e dis­po­si­ti­vos usam di­fe­ren­tes tamanhos de favicon. Por padrão, 16 × 16 px e 32 × 32 px são os formatos mais im­por­tan­tes, pois são usados nas abas tra­di­ci­o­nais do navegador.

Para pro­gres­sive web apps, sites que funcionam mais como apli­ca­ti­vos, você também deve dis­po­ni­bi­li­zar favicons em 192 × 192 px e 512 × 512 px. Esses tamanhos são definidos no manifesto para ícones de apli­ca­ti­vos e são usados por na­ve­ga­do­res como Chrome ou Edge quando um usuário “instala” um site.

Quais tamanhos de favicon o Google e a Apple exigem?

O tamanho de favicon exigido pelo Google é bem im­por­tante, porque o Google usa favicons não apenas no navegador, mas também nos re­sul­ta­dos de pesquisa. Lá, eles são exibidos em 48 × 48 pixels. Para Android, você também deve dis­po­ni­bi­li­zar uma versão de 192 × 192 pixels, ela serve como ícone do app quando os usuários adicionam seu site à tela inicial.

Para dis­po­si­ti­vos Apple, o tamanho de favicon ideal varia conforme o aparelho. No iPhone, é usado o formato de 60 × 60 pixels. No entanto, também é possível usar uma resolução mais alta, desde que seja um múltiplo desse valor. Isso garante uma exibição nítida em telas de alta resolução e pode ser reduzida para outros usos. Portanto, uma imagem de 180 × 180 pixels é uma boa escolha. Já os ícones no iPad são exibidos em 83.5 × 83.5 pixels. Para telas modernas Retina e Super Retina, o tamanho re­co­men­dado é 167 × 167 pixels, que é o dobro dessa resolução.

Esses ícones são ar­ma­ze­na­dos como Apple Touch Icons e são in­cor­po­ra­dos ao <head> da página usando a seguinte tag HTML:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
html

Os tamanhos de favicon mais im­por­tan­tes

Alguns na­ve­ga­do­res e dis­po­si­ti­vos usam exceções. Prin­ci­pal­mente em dis­po­si­ti­vos mais antigos, podem ser ne­ces­sá­ria dimensões adi­ci­o­nais para garantir que o ícone do navegador seja exibido cor­re­ta­mente. A seguir, veja uma visão geral dos tamanhos mais comuns:

Navegador ou dis­po­si­tivo Tamanho
A maioria dos na­ve­ga­do­res modernos 16 × 16 ou 32 × 32 pixels
Google e Android 48 × 48 ou 192 × 192 pixels
iPhone (modelos mais novos) 60 × 60 ou 180 × 180 pixels
iPad (modelos mais novos) 83.5 × 83.5 ou 167 × 167 pixels
Chrome Web Store 128 × 128 pixels
Google TV 96 × 96 pixels
Internet Explorer 9 24 × 24 pixels
Tela inicial do iPad 72 × 72 pixels
iPhone (modelos mais antigos) e iPod Touch 57 × 57 pixels
Tela inicial do iPhone 4 114 × 114 pixels
Discagem rápida do Opera 195 × 195 pixels

Quais formatos de arquivo funcionam para favicons?

Você pode usar vários formatos de imagem para o seu favicon. O clássico formato .ico ainda é am­pla­mente com­pa­tí­vel, mas é con­si­de­rado de­sa­tu­a­li­zado. Na­ve­ga­do­res modernos ge­ral­mente preferem favicons em PNG ou SVG. Para PWAs, por exemplo, o formato PNG é usado no arquivo de manifesto porque pode ser di­men­si­o­nado sem perda de qualidade.

Aqui está uma visão geral dos formatos de arquivo dis­po­ní­veis:

  • .ico: com­pa­ti­bi­li­dade máxima, mas es­ca­la­bi­li­dade limitada
  • .png: exibição nítida em todas as telas, com suporte a trans­pa­rên­cia
  • .svg: opção baseada em vetor, ideal para favicons es­ca­lá­veis e designs para o modo escuro
  • .gif: apenas em casos raros (por exemplo, ícones animados)
Dica

Cer­ti­fi­que-se de que o seu servidor entregue o tipo MIME correto (por exemplo, image/png ou image/svg+xml) para garantir a exibição adequada em todos os na­ve­ga­do­res.

Como criar um favicon com um gerador

Há vários detalhes a serem con­si­de­ra­dos ao escolher o favicon ideal para o seu site. Por isso, a abordagem mais simples é usar um gerador de favicon. Ele orienta você por todo o processo e garante que seu ícone seja criado em todos os formatos ne­ces­sá­rios para na­ve­ga­do­res modernos.

Ir para o menu principal