Favicons: tamanhos, formatos e tags HTML
Um favicon é um arquivo pequeno, mas navegadores, celulares e web apps instalados procuram tamanhos diferentes. Este guia explica de quais arquivos um site precisa, como declará-los no HTML e como criar um ícone que continue legível em 16 pixels.
O que é um favicon
Um favicon (abreviação de "favourites icon", ou ícone de favoritos) é a pequena imagem que identifica um site nas abas, nos favoritos e no histórico. Os celulares usam uma versão maior quando o site é adicionado à tela inicial, web apps instalados usam os ícones do manifesto, e alguns mecanismos de busca mostram o favicon ao lado dos resultados. Como esses lugares usam tamanhos diferentes, um site geralmente oferece um pequeno conjunto de arquivos.
Favicons ICO, PNG e SVG
| Formato | O que contém | O que é bom saber |
|---|---|---|
ICO (favicon.ico) |
Vários tamanhos em um só arquivo, muitas vezes 16, 32 e 48 pixels | O formato mais antigo. Muitos navegadores solicitam /favicon.ico na raiz do site mesmo quando a página não aponta para ele, então é um recurso alternativo útil. |
| PNG | Um tamanho por arquivo, com transparência | Declarado com um atributo sizes para que o navegador possa escolher um arquivo adequado. Também é usado no Apple touch icon e nos ícones do manifesto. |
| SVG | Um desenho vetorial que se ajusta a qualquer tamanho | Compatível com a maioria dos navegadores atuais para computador, mas não com todos, então mantenha também arquivos ICO ou PNG. Um favicon SVG pode se adaptar a um tema escuro com CSS. |
Um arquivo ICO é um pequeno contêiner: um cabeçalho lista cada imagem com seu tamanho e sua posição, e as imagens podem ser armazenadas como dados PNG. O Gerador de favicon do LeedyBox cria um favicon.ico com imagens PNG de 16, 32 e 48 pixels, além de arquivos PNG para os outros tamanhos.
Tamanhos comuns e onde são usados
| Tamanho (pixels) | Arquivo típico | Uso típico |
|---|---|---|
| 16 × 16 | favicon-16x16.png, dentro do favicon.ico | Abas e favoritos em telas comuns |
| 32 × 32 | favicon-32x32.png, dentro do favicon.ico | Abas em telas de alta densidade, alguns atalhos |
| 48 × 48 | dentro do favicon.ico | Ícones maiores de atalho e da área de trabalho em alguns sistemas |
| 180 × 180 | apple-touch-icon.png | Ícone da tela inicial no iPhone e no iPad |
| 192 × 192 | android-chrome-192x192.png | Ícone da tela inicial no Android, listado no manifesto |
| 512 × 512 | android-chrome-512x512.png | Caixas de diálogo de instalação e telas de abertura de web apps |
Comece com uma imagem de origem quadrada de pelo menos 512 × 512 pixels ou com um arquivo SVG. Uma imagem de origem pequena precisa ser ampliada para os ícones maiores e fica borrada. Um logotipo que não é quadrado precisa de espaço extra em volta ou tem de ser recortado.
O Apple touch icon não deve ser transparente: alguns dispositivos da Apple mostram as áreas transparentes em preto. Em vez disso, preencha o fundo com uma cor. O iPhone e o iPad arredondam os cantos por conta própria, então o arquivo pode ser um quadrado simples. Veja como a transparência funciona em PNG e JPG para entender melhor os canais alfa.
As tags HTML e o manifesto do web app
Coloque os arquivos na pasta raiz do site e adicione estas tags dentro do <head> de cada página:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">Se você também tiver um favicon SVG, adicione <link rel="icon" href="/favicon.svg" type="image/svg+xml">. O manifesto (site.webmanifest) é um pequeno arquivo JSON com o nome do site, um nome curto, os ícones de 192 e 512 pixels, uma cor de tema, uma cor de fundo e um modo de exibição, como standalone. Se os arquivos estiverem em outra pasta, altere todos os caminhos nas tags e no manifesto.
Design para tamanhos minúsculos
- Mantenha a simplicidade. Em 16 pixels, linhas finas, textos pequenos e detalhes delicados viram borrão. Uma marca simplificada, uma única forma ou uma ou duas letras funcionam melhor do que um logotipo completo com slogan.
- Use um contraste forte. Uma diferença clara de brilho entre o ícone e o fundo importa mais do que as cores exatas da marca.
- Use pouca margem interna. Espaço vazio encolhe a parte visível do ícone. Uma pequena margem pode ajudar ícones maiores, mas favicons pequenos são mais fáceis de reconhecer quando ocupam a maior parte do quadrado.
- Confira o tamanho real. Veja o ícone com zoom de 100% em uma aba, não apenas em uma pré-visualização ampliada.
Temas escuros do navegador
Muitas pessoas usam uma barra de abas escura. Um logotipo escuro sobre um fundo transparente pode quase desaparecer nela, e um logotipo branco pode sumir em um tema claro. Soluções comuns são uma forma de fundo sólida ou arredondada atrás do logotipo, um contorno claro ou um favicon SVG que muda de cor com uma media query prefers-color-scheme (onde houver suporte a favicons SVG). O gerador do LeedyBox mostra uma barra de abas clara e uma escura para que você possa comparar as duas.
Atualização do favicon e cache do navegador
Os navegadores guardam os favicons em cache, às vezes por muito tempo, então um ícone novo pode não aparecer logo depois de ser enviado. Uma atualização forçada ou uma janela anônima pode mostrar a nova versão. Para que visitantes recorrentes busquem o arquivo novo mais cedo, mude o nome do arquivo ou acrescente uma versão ao URL nas suas tags, por exemplo /favicon-32x32.png?v=2. Os ícones nos favoritos e nos resultados de busca podem demorar mais para atualizar. Depois de qualquer mudança, teste o resultado nos navegadores e dispositivos que importam para você.
Perguntas frequentes
O favicon.ico ainda é necessário?
Não é obrigatório, mas é um recurso alternativo simples: muitos navegadores e outras ferramentas procuram /favicon.ico na pasta raiz de um site. Ele ocupa apenas alguns kilobytes.
Posso usar um JPG como favicon?
Os navegadores geralmente conseguem exibi-lo, mas o JPG não tem transparência e sua compressão pode borrar detalhes pequenos. Arquivos PNG, ICO ou SVG são escolhas melhores para ícones.
Por que meu novo favicon não aparece?
Na maioria das vezes, o ícone antigo ainda está em cache, ou os caminhos nas tags HTML não correspondem ao local para onde os arquivos foram enviados. Abra o URL de cada arquivo diretamente no navegador para verificar se ele carrega.