Guia
Tamanho do favicon: quais tamanhos e formatos você precisa
O favicon é o pequeno ícone do site que aparece na aba do navegador, nos favoritos e nos resultados de busca. Ele é exibido em vários tamanhos, de 16 pixels em uma aba a 512 pixels em um ícone de app. Este guia lista os tamanhos que importam e como adicioná-los.
Tamanho do favicon para site: a lista curta
| Tamanho | Arquivo | Onde é usado |
|---|---|---|
| 16 × 16 px | favicon.ico | Abas do navegador e favoritos |
| 32 × 32 px | favicon.ico | Abas em telas de alta densidade, atalhos do Windows |
| 48 × 48 px | favicon.ico | Windows e resultados da Pesquisa Google |
| 180 × 180 px | apple-touch-icon.png | Tela de início do iPhone e do iPad |
| 192 × 192 px | icon-192.png | Android e web apps instalados |
| 512 × 512 px | icon-512.png | Telas de abertura e lojas de apps para web apps |
Um favicon.ico com 16, 32 e 48 px, mais os três arquivos PNG, cobre navegadores, celulares e buscadores. O nosso gerador de favicon cria todos eles a partir de uma imagem.
Tamanho ideal do favicon em pixels para o Google
O Google mostra favicons ao lado dos resultados de busca. As diretrizes exigem um favicon quadrado de pelo menos 8 × 8 pixels e recomendam um maior que 48 × 48 pixels para que ele fique bom em superfícies diferentes (Google Search Central). Um favicon.ico com uma imagem de 48 px, ou um PNG vinculado de 192 px, atende a essa recomendação.
Formatos de favicon além do tamanho: ICO, PNG e SVG
- ICO guarda vários tamanhos em um só arquivo e é o que os navegadores pedem em
/favicon.icoquando nenhum ícone foi declarado. Mantenha um para compatibilidade. - PNG é usado no Apple touch icon e nos ícones de app listados no web manifest.
- SVG funciona como favicon nos navegadores modernos e fica nítido em qualquer tamanho. Adicione como ícone extra, não como o único.
Para transformar um PNG que você já tem em um .ico com os tamanhos que escolher, use o conversor de PNG para ICO.
Favicon no HTML: como adicionar cada tamanho
Envie os arquivos para a raiz do site e adicione estas tags dentro do <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">O manifest lista os ícones de 192 e 512 px. Tire a linha do SVG se você não tiver uma versão em SVG.
Tamanho do favicon no WordPress, Shopify e Squarespace
Os construtores de sites pedem uma imagem e geram os tamanhos sozinhos. O WordPress chama isso de Ícone do site e pede uma imagem quadrada de pelo menos 512 × 512 pixels. Shopify e Squarespace também aceitam uma imagem quadrada nas configurações de marca ou de design. Envie um PNG quadrado grande e deixe a plataforma redimensionar; depois confira o resultado em uma aba do navegador.