Basta um único ficheiro favicon.ico?

Normalmente sim nos navegadores de computador, desde que contenha os tamanhos 16, 32 e 48 px. Mas o ecrã principal do iPhone e o arranque de aplicações no Android precisam de ficheiros PNG separados, por isso é melhor prepará-los também.

Porque é que o meu novo favicon não aparece?

Na maioria das vezes é a cache. Abra a página numa janela privada, limpe os dados do navegador, ou mude o nome do ficheiro ou acrescente um parâmetro ?v=2. Os motores de pesquisa podem demorar vários dias ou mais a atualizar a sua cópia do ícone.

Um favicon pode ser um JPG?

Alguns navegadores aceitam-no, mas o JPG não tem transparência e não é a escolha normal. Use antes PNG, ICO ou SVG.

Como criar um favicon: tamanhos, formatos e código HTML

Um favicon é o pequeno ícone do sítio que aparece nos separadores do navegador, nos marcadores e nos resultados de pesquisa. Parece um pormenor, mas um sítio sem ele parece inacabado, e um tamanho ou formato errado pode deixar o ícone desfocado. Este guia explica que tamanhos são necessários, que formato escolher e que código colocar na sua página.

O que é um favicon e onde aparece

Um favicon (abreviatura de favorite icon, ou ícone favorito) é uma pequena imagem quadrada que os navegadores mostram ao lado do título da página num separador, na lista de marcadores e no histórico. No telemóvel, os resultados de pesquisa da Google também mostram o ícone do sítio junto ao endereço, pelo que um favicon claro ajuda as pessoas a reconhecer o seu sítio.

Se não declarar um ícone, os navegadores costumam tentar obter /favicon.ico a partir da raiz do sítio. Quando falta, mostram um símbolo genérico de globo ou de página em branco.

Que tamanhos são necessários

Não existe um tamanho universal único, porque locais diferentes usam ficheiros diferentes. Na prática basta um pequeno conjunto, e pode prepará-lo todo a partir de um único PNG quadrado com pelo menos 512 px de lado.

Tamanho	Utilização
16x16 px	Separador do navegador (ecrãs de densidade normal)
32x32 px	Separador em ecrãs de alta densidade, barra de tarefas
48x48 px	Alguns navegadores e motores de pesquisa, atalhos do Windows
180x180 px	apple-touch-icon, quando um sítio é adicionado ao ecrã principal de um iPhone ou iPad
192x192 px	Manifesto web, ecrã principal do Android
512x512 px	Manifesto web, ecrãs de arranque e ícones de aplicação maiores

ICO, PNG ou SVG

O ICO é um formato de contentor antigo que pode guardar vários tamanhos (por exemplo 16, 32 e 48 px) num só ficheiro. Todos os navegadores o suportam, por isso o /favicon.ico continua a ser útil como alternativa.

O PNG é simples e fiável: serve para as versões de 32, 180, 192 e 512 px e suporta transparência. O SVG é um formato vetorial suportado pelos navegadores modernos: um só ficheiro mantém-se nítido em qualquer tamanho e pode até adaptar-se ao modo escuro. No entanto, o Safari e algumas ferramentas mais antigas só tratam parcialmente os favicons SVG, pelo que a abordagem mais segura é combiná-los: ICO como alternativa, PNG para os ícones da Apple e do manifesto, e SVG como extra opcional.

Como criar um favicon a partir de um PNG

Comece com uma imagem quadrada, idealmente de 512x512 px ou maior, com um desenho claro e simples. Se só tiver um JPG, pode convertê-lo primeiro para PNG, para que mais tarde se possa adicionar um fundo transparente num editor de imagem.

Prepare um PNG quadrado com um logótipo simples ou uma única letra.
Converta-o para ICO com uma ferramenta de PNG para ICO e guarde-o como favicon.ico.
Guarde separadamente cópias PNG em 180x180 (apple-touch-icon.png), 192x192 e 512x512 para o manifesto web.
Carregue os ficheiros para a raiz do sítio e adicione as etiquetas HTML ao <head>.

As etiquetas HTML a adicionar

Coloque estas linhas dentro do <head> da sua página (ajuste os caminhos conforme a localização dos seus ficheiros):

No site.webmanifest, em icons, indique os ficheiros PNG de 192x192 e 512x512. Se não tiver um SVG, basta omitir essa linha.

Erros comuns

Imagem não quadrada: o navegador comprime-a ou corta-a e o ícone fica deformado. Comece sempre por uma imagem quadrada.
Demasiado pormenor: a 16x16 px, o texto pequeno e as sombras transformam-se numa mancha. Use uma forma simples, cores fortes e contraste elevado.
Origem demasiado pequena: ampliar uma imagem pequena deixa-a desfocada. Reduzir uma grande é muito mais seguro.
Fundo transparente num separador escuro: um logótipo escuro pode desaparecer. Verifique-o nos temas claro e escuro ou adicione uma cor de fundo.
Cache: os navegadores guardam os favicons de forma teimosa, por isso o ícone antigo pode continuar a aparecer depois de o alterar. Teste numa janela privada, faça uma atualização forçada (Ctrl+F5) ou acrescente uma versão, como /favicon.ico?v=2.

Um exemplo prático do princípio ao fim

Suponha que tem um logótipo PNG de 1024x1024 px e quer um conjunto completo de ícones para o seu sítio. Primeiro veja o logótipo reduzido a 16x16 px: ainda consegue reconhecer a forma? Se não, faça uma versão simplificada, por exemplo apenas a primeira letra sobre um fundo liso. Só depois exporte os tamanhos.

A seguir prepare os ficheiros: favicon.ico (16, 32 e 48 px num só ficheiro), apple-touch-icon.png (180x180), icon-192.png e icon-512.png. São quatro ficheiros, suficientes para quase todas as situações. Carregue-os para a raiz do sítio, adicione as etiquetas ao <head> e abra a página numa janela privada para verificar o resultado.

Como verificar se tudo funciona

Abra https://o-seu-sitio/favicon.ico diretamente no navegador: deve ver o ícone, não um erro 404.
Nas ferramentas de programador (F12, separador Rede) volte a carregar a página e confirme que os pedidos do ícone devolvem o estado 200.
Veja o separador nos temas claro e escuro do navegador: o logótipo tem de continuar legível em ambos.
No telemóvel, adicione o sítio ao ecrã principal e verifique se aparece o ícone de 180 px e não uma captura da página.
Certifique-se de que o site.webmanifest é JSON válido e de que os caminhos nele correspondem a ficheiros reais.