O que é um favicon

O favicon é o pequeno ícone de um site: no separador do browser, nos favoritos e no histórico, ao lado do nome do site nos resultados do Google, e no ecrã inicial do telemóvel quando alguém guarda o site. É minúsculo, mas é o que as pessoas procuram quando têm vinte separadores abertos, e a falta dele — a página em branco ou o ícone por defeito do alojamento — dá ao site um ar inacabado.

Como aparece com apenas 16×16 píxeis, um favicon não é uma cópia pequena do teu logótipo. É a marca mais simples que tens: uma inicial, um monograma, um símbolo ou um emoji, sobre uma cor que se destaque.

Todos os ficheiros que recebes

O favicon.ico guarda versões de 16, 32 e 48 píxeis num só ficheiro; é o que os browsers pedem por defeito em /favicon.ico. O favicon-16x16.png e o favicon-32x32.png são as versões nítidas para os separadores. O apple-touch-icon.png (180×180) é o ícone que o iPhone ou o iPad usam quando alguém junta o teu site ao ecrã inicial — é guardado como quadrado inteiro, porque o iOS arredonda os cantos sozinho. O android-chrome-192x192.png e o de 512×512 estão no site.webmanifest, que o Android usa para o ecrã inicial e o ecrã de arranque.

O zip leva ainda um ficheiro de texto com o HTML, o mesmo que podes copiar acima.

Como o juntar ao teu site

Carrega os ficheiros para a raiz do teu site (a mesma pasta da página inicial) e cola o HTML no <head> de todas as páginas, ou no cabeçalho do teu modelo. No WordPress podes, em vez disso, ir a Aspeto › Personalizar › Identidade do site › Ícone do site e carregar o PNG de 512×512. No Shopify é em Loja online › Temas › Personalizar › Definições do tema › Favicon; no Wix e no Squarespace, procura Favicon nas definições do site ou do browser.

Os browsers guardam os favicons durante muito tempo. Se não vires o novo, abre o site numa janela privada ou limpa a cache.

Fazê-lo legível a 16 píxeis

Um só caractere é o mais legível; dois funcionam se forem estreitos. Letras grossas aguentam melhor o tamanho pequeno do que letras finas, e um contraste forte entre as letras e o fundo conta mais do que a cor exata — a ferramenta avisa quando o contraste é baixo. Para um logótipo, usa a versão mais simples, sem palavras, e deixa algum espaço à volta para não tocar nas margens.

Um fundo transparente fica bem em separadores claros mas pode desaparecer nos escuros. Se a tua marca for escura, dá-lhe uma cor de fundo.

Privado de origem

O teu ícone é desenhado no teu browser, e uma imagem que juntes nunca sai do teu dispositivo. Os ficheiros não têm marca de água e são teus para usar em qualquer site, incluindo de clientes.