Gerador de favicon

Q: Que etiquetas HTML são precisas para um favicon?

No mínimo e . Acrescente o PNG de 32 px e um manifesto se quiser abranger também o Android e as aplicações web.

Transforme uma imagem no ícone do seu site, em todos os tamanhos.

O que é um favicon?

É o pequeno ícone que representa um site no separador do navegador, nos favoritos, no histórico, nos resultados de pesquisa no telemóvel e no ecrã principal de um telefone quando o site é fixado. Sem favicon, o navegador mostra um ícone genérico, o que dá ao site um ar inacabado.

Criar o seu favicon

Escolha uma imagem, idealmente quadrada, com pelo menos 512 × 512 píxeis. O Toolo gera:

um ficheiro favicon.ico, o formato histórico reconhecido em todo o lado;
um pacote de PNG nos tamanhos modernos, descarregável em ZIP.

Ficheiro	Tamanho	Função
favicon.ico	16, 32, 48 px	Separadores e favoritos, todos os navegadores
apple-touch-icon	180 px	Ecrã principal do iPhone e do iPad
Ícone 192	192 px	Ecrã principal do Android, manifesto PWA
Ícone 512	512 px	Ecrã de arranque das aplicações web

Instalar os ficheiros

Coloque favicon.ico na raiz do seu site: os navegadores procuram-no automaticamente em /favicon.ico. Acrescente depois no <head> das suas páginas as etiquetas correspondentes, por exemplo:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Para uma aplicação web instalável, declare os ícones 192 e 512 no ficheiro manifest.webmanifest.

Um ícone minúsculo que funcione

Simplifique: a 16 píxeis, um logótipo detalhado torna-se uma mancha. Uma letra, um símbolo ou uma forma simples funcionam melhor.
Contraste: o ícone tem de continuar legível num separador claro e num escuro.
Ocupe a superfície: deixe pouca margem à volta do motivo.

O meu novo favicon não aparece

Os navegadores guardam os favicons em cache durante muito tempo. Recarregue a página forçando a atualização, abra o site numa janela privada ou acrescente um parâmetro de versão ao endereço, como /favicon.ico?v=2.

Como criar um favicon, passo a passo

Prepare a imagem de origem: um quadrado com pelo menos 512 × 512 píxeis, de preferência um PNG transparente. Um logótipo simples ou uma única letra continua legível a 16 píxeis.
Gere os ficheiros: largue a imagem acima e descarregue o favicon.ico (16, 32 e 48 px num só ficheiro) e o pacote PNG em ZIP, que inclui de favicon-16x16.png a favicon-512x512.png.
Envie-os para a raiz do site: favicon.ico, favicon-32x32.png, favicon-192x192.png, favicon-512x512.png e favicon-180x180.png com o nome apple-touch-icon.png.
Declare-os no <head> de cada página.

As etiquetas HTML para copiar

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">, apenas se o site tiver um manifesto, onde se indicam os PNG de 192 e 512 para Android.

WordPress e Shopify: a definição «ícone do site»

Num CMS não é preciso mexer no código. No WordPress, o ícone do site fica em Aspeto > Personalizar > Identidade do site, ou no bloco Logótipo do site com um tema de blocos: carregue o PNG de 512 px e o WordPress acrescenta as etiquetas. No Shopify, abra Loja online > Temas > Personalizar e depois as definições do tema, na secção Logótipo ou Favicon consoante o tema.

Porque continua a aparecer o favicon antigo

Além da cache do navegador, um plugin de cache ou uma CDN podem continuar a servir o ficheiro antigo: limpe-a depois da alteração. Nos resultados do Google, o favicon só é atualizado quando o Google volta a rastrear a sua página inicial, o que pode demorar vários dias.

Perguntas frequentes

A imagem tem de ser quadrada?

Idealmente sim. Uma imagem não quadrada será adaptada, o que a pode deformar ligeiramente. Recorte-a primeiro em quadrado com a ferramenta Recortar imagem.

A minha imagem é enviada para um servidor?

Não. Os ícones são gerados no seu navegador; a imagem não sai do seu dispositivo.

Um PNG transparente mantém a transparência?

Sim. A transparência é mantida no ficheiro ICO e nos PNG.

Preciso mesmo de todos os tamanhos?

O favicon.ico chega para os separadores. Os PNG de 180, 192 e 512 melhoram a apresentação no ecrã principal dos telemóveis e nas aplicações web.

Que etiquetas HTML são precisas para um favicon?

No mínimo <link rel="icon" href="/favicon.ico" sizes="any"> e <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Acrescente o PNG de 32 px e um manifesto se quiser abranger também o Android e as aplicações web.

Que tamanho deve ter o ícone do site no WordPress?

O WordPress pede uma imagem quadrada com pelo menos 512 × 512 píxeis: use o ficheiro favicon-512x512.png do pacote.

O pacote inclui um ficheiro manifest?

Não, o ZIP contém apenas as imagens PNG. Se o seu site precisar de um manifesto, crie o ficheiro manifest.webmanifest e indique nele os PNG de 192 e 512 px.