Um favicon não é uma imagem só. É o ícone pequeno num separador do navegador, o ícone maior que um telemóvel usa quando um site é adicionado ao ecrã principal, e o ícone ainda maior que um manifesto de aplicação web e os seletores de aplicações esperam. Cada contexto quer um tamanho diferente, e errar um nota-se: um ícone de 16 píxeis esticado para preencher um quadrado do ecrã principal parece avariado de uma forma que os visitantes registam.
Este gerador produz o conjunto completo a partir de uma imagem. A sua fonte é recortada ao centro num quadrado, redimensionada para cada medida necessária com o reamostrador pica em vez do filtro predefinido do navegador — o que faz enorme diferença a 16 píxeis, onde um redimensionamento grosseiro transforma um logótipo numa mancha — e empacotada num ZIP juntamente com um verdadeiro ficheiro .ico multirresolução.
Os ícones são gerados no navegador. Logótipos não publicados e material de marca não são carregados para nenhum serviço de ícones.
<head> das suas páginas.| Ficheiro | Tamanho | Usado por |
|---|---|---|
| favicon.ico | 16, 32 e 48 combinados | Separadores do navegador, marcadores, compatibilidade histórica |
| favicon-16x16.png | 16 × 16 | Ícone de separador em ecrãs de densidade normal |
| favicon-32x32.png | 32 × 32 | Ícone de separador em ecrãs de alta densidade |
| favicon-48x48.png | 48 × 48 | Atalhos para sites no Windows |
| apple-touch-icon.png | 180 × 180 | Ecrã principal do iOS |
| icon-512.png | 512 × 512 | Ecrã principal do Android, manifesto PWA, seletores de aplicações |
O ficheiro .ico é um verdadeiro contentor multirresolução que aloja as versões de 16, 32 e 48 píxeis, e não um PNG renomeado. O Windows e os navegadores mais antigos escolhem o tamanho adequado ao contexto em que estão a desenhar.
Extraia o ZIP para a raiz do site e adicione isto ao <head> de cada página:
| Objetivo | Etiqueta |
|---|---|
| Favicon clássico | <link rel='icon' href='/favicon.ico' sizes='any'> |
| Densidade normal | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| Alta densidade | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| Ecrã principal do iOS | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
O ícone de 512 píxeis é referenciado pelo manifesto da sua aplicação web e não por uma etiqueta link.
Um favicon é frequentemente mostrado com 16 píxeis de lado, aproximadamente o tamanho de um único carater de texto corrente. Um logótipo completo é ilegível a essa escala; uma ilustração detalhada torna-se ruído.
O que funciona é uma única letra, um monograma simples ou uma forma decidida com forte contraste tanto sobre separadores claros como escuros. Verifique reduzindo o logótipo a 16 píxeis e olhando para ele a um braço de distância: se não perceber o que é, ninguém vai perceber.
Pelo menos 512 × 512 e de preferência quadrada. A fonte é recortada ao centro num quadrado, por isso um logótipo largo perde as extremidades. Preencha-o primeiro até ficar quadrado com a ferramenta Tornar quadrada se isso for um problema.
Sim. É um autêntico contentor ICO multirresolução com imagens de 16, 32 e 48 píxeis, e não um PNG com a extensão trocada. O Windows e os navegadores mais antigos leem-no corretamente.
No diretório raiz do seu site, para ficarem acessíveis em caminhos como /favicon.ico. Depois adicione às páginas as etiquetas link mostradas acima.
Os navegadores guardam favicons em cache de forma muito insistente. Force um recarregamento, ou abra diretamente o URL do ficheiro do ícone para confirmar que está a ser servido, e recarregue a página.
Sim nos ficheiros PNG, que mantêm o canal alfa. Note que um ícone transparente tem de funcionar tanto sobre separadores claros como escuros.
Não. O recorte, o redimensionamento e a composição do ICO acontecem todos no navegador.