Como criar um favicon.

Abra o Gerador de Favicon / ICO e escolha Imagem. Carregue um PNG, JPG, JPEG, WebP ou GIF, ou selecione Experimentar uma amostra. O exemplo de trabalho utiliza favicon-orbit.png, uma marca de órbita violeta de 512 × 512 pixéis com cantos transparentes. A entrada é de 202,491 bytes.

Para uma marca sem um logótipo finalizado, selecione Texto na página da ferramenta. Introduza uma ou duas letras e escolha Continuar. O editor oferece tipos de letra Modern sans, Classic serif e Monospace, além de cores de texto e fundo separadas. São aceites até três caracteres, mas caracteres extra podem tornar-se difíceis de reconhecer em tamanhos pequenos.

Mantenha a arte original. O gerador cria novos ficheiros de ícones e não substitui a fonte. A entrada GIF torna-se um ícone estático em vez de um favicon animado.

Para um monograma, o menu Tipo de letra começa com três estilos incluídos. Selecione Usar tipos de letra do sistema num navegador de ambiente de trabalho suportado e permita o acesso para adicionar os tipos de letra instalados no seu dispositivo. Use os sinais de maior e menor anteriores e seguintes para comparar tipos de letra adjacentes, ou escolha uma família e inspecione a pré-visualização ao vivo, especialmente a 16 pixéis. Os tipos de letra permanecem no seu dispositivo; os estilos incluídos funcionam sem permissão.

O editor apresenta separadores de navegador claros e escuros, além de pré-visualizações em tamanhos de ícones comuns. Verifique primeiro o exemplo de 16 pixéis; é o teste mais rigoroso para saber se a marca permanece reconhecível. A pré-visualização Apple Touch representa uma exportação de 180 pixéis e é apresentada mais pequena na área de trabalho.

Num telemóvel, abra as Definições. Deixe Criar a partir definido como Imagem carregada e Ajuste da imagem definido como Mostrar a imagem completa. Para esta amostra, defina Espaço em torno do conteúdo como 0 e ative Fundo transparente. A fonte já contém a sua própria forma violeta arredondada e margens claras, por isso não precisa de um fundo colorido adicional.

Com uma fonte diferente, Mostrar a imagem completa mantém as suas margens, enquanto Preencher o ícone pode cortá-las. Quadrado arredondado, Quadrado e Círculo definem a forma exterior. O fundo transparente preserva áreas claras, mas não consegue remover um fundo opaco já desenhado numa fotografia. Reveja a pré-visualização mais pequena após cada alteração de enquadramento.

Em Download, escolha Website icon package (ZIP) para este exemplo. Deixe Website name como My website para a amostra, ou substitua-o pelo nome real da marca para o seu próprio projeto. Este nome é utilizado em site.webmanifest; não é adicionado como texto sobre a imagem.

Selecione Start. O navegador gera um favicon.ico de sete fotogramas com imagens quadradas a 16, 24, 32, 48, 64, 128 e 256 píxeis. Cria também ícones PNG a 16, 32, 48, 180, 192 e 512 píxeis, um manifesto e instruções de instalação. O resultado é um único ZIP em vez de um botão de transferência separado para cada ícone.

Se apenas necessitar de um favicon.ico clássico, escolha Multi-size ICO em alternativa. Isto é útil quando uma plataforma de website aceita um carregamento ICO e não necessita de um pacote separado.

Download guarda website-icons.zip. O exemplo prático real contém nove ficheiros e tem 304,351 bytes. A comparação acima mostra a fonte de 512 píxeis ao lado do fotograma genuíno de 256 píxeis extraído do ICO exportado, em vez de uma captura de ecrã simulada do navegador.

Extraia o ZIP, carregue os ficheiros de ícones para a raiz do seu website e leia INSTALL.txt. Inclui etiquetas de ligação HTML para o ICO, ícone PNG, ícone Apple Touch e manifesto web. Se colocar os ficheiros numa subpasta, atualize tanto os caminhos HTML como os caminhos dos ícones dentro de site.webmanifest.

Verifique o seu site num separador de navegador novo e nos dispositivos que lhe interessam. Os navegadores podem colocar favicons em cache, pelo que um ícone antigo não prova imediatamente que a instalação falhou. Guarde a imagem de origem e o pacote transferido antes de atualizar o editor, porque uma atualização regressa à página principal da ferramenta.