Como gerar o código de um favicon com emoji e cores

O que a ferramenta gera

Um favicon é o pequeno ícone associado a um site no separador do navegador. Esta ferramenta gera o código HTML para a ligação do favicon e fornece também o SVG correspondente, a partir de um emoji, de cores e, opcionalmente, de um URL de ícone. É útil quando pretende preparar rapidamente a marcação que será colocada na área <head> de uma página, sem precisar de criar manualmente a estrutura do SVG.

Pode escolher um emoji para representar o site, indicar uma cor de fundo e uma cor para o texto do SVG e, se necessário, preencher um URL de ícone. O campo do título do site pode ser apresentado nos controlos, mas não altera o favicon nem é utilizado na marcação gerada.

Como gerar o favicon

Abra a ferramenta e preencha os campos disponíveis. Introduza o emoji que quer ver no SVG, uma cor de fundo e uma cor de texto. Se não indicar estes valores, são usados o emoji de uma chave inglesa, o fundo #2563eb e o texto #ffffff.
Se também quiser uma ligação para um ícone alojado num URL, preencha o campo opcional com esse endereço. Um valor não vazio é inserido na marcação HTML em dois elementos de ligação para ícones; o endereço é colocado com escape HTML. Isto significa que a ferramenta insere o URL na marcação, mas não há base para concluir que descarrega ou verifica a imagem apontada.
Pode preencher o título do site se o campo fizer parte do formulário, mas não o use como forma de alterar o resultado: esse valor não é utilizado na marcação gerada. Depois de definir os restantes campos, execute a geração. O percurso demonstrado devolve um resultado bem-sucedido com o material do favicon.
Copie a marcação HTML gerada para a secção apropriada da página e consulte também o SVG fornecido. A saída inclui uma ligação para um favicon SVG através de um URI de dados, além da marcação SVG do favicon.

Como interpretar o resultado

Leia o resultado como dois materiais relacionados: a marcação HTML que liga o favicon à página e o SVG que representa o ícone. O emoji fornecido aparece como texto dentro do SVG, enquanto as cores indicadas controlam o fundo e o texto. Quando não são indicados valores, o resultado segue os valores predefinidos descritos acima.

Se tiver preenchido um URL de ícone, procure os dois elementos de ligação correspondentes na marcação HTML e confirme se o endereço inserido é o pretendido. A presença desses elementos não significa que a ferramenta tenha obtido ou validado um ficheiro de imagem. O título do site também não deve ser usado para avaliar o resultado, porque não participa na marcação gerada.

O resultado esperado é material de favicon, não uma imagem raster ou uma confirmação de que o emoji e as cores são válidos. Verifique o conteúdo antes de o integrar no site e faça a apresentação final no seu próprio contexto de página.

Exemplo prático

Para um site pessoal, a pessoa quer preparar um favicon com uma estrela, fundo escuro e texto claro.

Num site pessoal, introduza o emoji de uma estrela, escolha um fundo escuro e texto claro, deixe o URL opcional vazio e execute a geração. Consulte a marcação HTML e o SVG devolvidos, sem esperar que o título introduzido seja usado no resultado.

O resultado contém marcação HTML de favicon, incluindo a ligação SVG através de URI de dados, e fornece também a marcação SVG correspondente.

Limitações

A ferramenta insere o URL na marcação, mas não é descrita como responsável por descarregar ou validar a imagem. Também não há indicação de validação do emoji ou das cores, nem de utilização do título do site.

Erros comuns

Se esperar que o título altere o favicon ou que o URL seja convertido numa imagem, o resultado pode parecer incorreto. Use o título apenas como referência e trate o URL como uma entrada para a marcação HTML; a ferramenta não é descrita como responsável por descarregar ou validar a imagem.

Perguntas frequentes

Posso adicionar um URL de ícone ao favicon?

Sim, desde que o campo seja preenchido com um valor não vazio: o URL é inserido em dois elementos de ligação para ícones na marcação HTML, com escape HTML. A ferramenta não é descrita como responsável por descarregar ou validar esse endereço.

O título do site muda o favicon?

Pode indicar um título, mas esse valor não é utilizado na marcação gerada e não altera o favicon. Para alterar o SVG, use o emoji e as cores disponíveis.

Que tipo de resultado é gerado?

O resultado fornece marcação HTML e um SVG de favicon, incluindo uma ligação SVG através de um URI de dados. Não há indicação de que sejam gerados ficheiros de imagem raster.