Texto de: Letícia Garcez
Introdução
Favicons são ícones que estão associados às aplicações web, e mesmo que você nunca tenha ouvido essa palavra, provavelmente já conhece esse tipo de ícone. Os favicons são os ícones mostrados nas abas ou na barra de favoritos do seu navegador. Esses ícones facilitam a identificação da sua aplicação entre as abas ou favoritos salvos no navegador, além de reforçar a identidade visual da aplicação.
Formato e tamanho de um Favicon
Geralmente um favicon é uma imagem pequena com a extensão .ico, .png ou .gif. O tamanho dessas imagens é dado em pixels e costuma ser algo em torno de 16X16 ou 32X32 para favicons usados em navegadores.
Além dos formatos .ico, .png e .gif, também é possível utilizar formatados como .jpeg e .svg, porém é importante dizer que utilizar esses formatos não são uma boa prática já que nem todos os navegadores suportam esse tipo de arquivo como favicon.
Pelo tamanho do ícone ser pequeno, também é recomendado que você utilize uma imagem com um tamanho adequado para o que é requerido no navegador, já que seria um desperdício de recursos adicionar uma imagem em alta resolução e reduzi-la para alguns poucos pixels de exibição.
Criando um favicon
Agora que já entendemos o que é um favicon, vamos criar um. Existem vários sites focados na criação desses ícones, e eu utilizarei o site Favicon.io, que pode ser acessado clicando aqui. Logo na página inicial do site, observamos os três tipos de geradores de favicon disponíveis:
O primeiro gerador transforma imagens em formato png em favicons, o segundo transforma textos em favicons e o terceiro cria favicons a partir de emojis. Você pode utilizar o gerador que você julgar que se alinha mais ao estilo que você quer para o favicon da sua aplicação. Eu mostrarei como usar cada um dos geradores e no final mostrarei como adicionar esse favicon na sua aplicação, já que o processo é o mesmo.
Transformando uma imagem em Favicon
Para gerar um favicon a partir de uma imagem, basta fazer o upload da imagem diretamente do seu computador e clicar em download para baixar um arquivo zip com diferentes versões do favicon para sua aplicação. Veremos o que fazer com esse arquivo mais adiante neste artigo.
Transformando um texto em favicon
Para gerar um favicon textual é preciso selecionar esse gerador e na página de geração você verá diversas opções de personalização do favicon, incluindo o texto que será exibido, a fonte desse texto e as cores de fundo e da fonte. Você pode acompanhar como o seu favicon ficará através do Preview, e depois que estiver satisfeito com a estilização do ícone, basta clicar em download.
Transformando um emoji em favicon
Já na opção de utilizar um emoji como favicon, só é preciso escolher um emoji entre os disponíveis na aplicação.
Uma vez que você tenha clicado no emoji que deseja ter como favicon, a página abaixo aparecerá, e nessa página basta clicar em download.
Aplicando um Favicon
Uma vez que você tenha feito o donwload de um arquivo zip que contém diferentes versões do seu ícone, é hora de adicionar seu favicon em uma aplicação. Na página de cada um desses geradores que listei, existem informações de como usar os ícones gerados pelo site.
Resumidamente, o que as instruções de instalação dos favicons dizem é para colocar uma lista de arquivos que estarão disponíveis dentro do .zip baixado na pasta raiz do seu projeto e adicionar algumas linhas de código dentro da tag head do seu arquivo HTML.
É importante mencionar aqui que este código do site considera que as imagens referentes ao seu favicon estarão na mesma pasta que o arquivo HTML com a tag head onde o código será colado. Caso as imagens estejam em outro local, será preciso alterar a propriedade href para deixá-la com o caminho correto para os ícones.
Uma vez que os arquivos do zip gerado pelo site tenham sido descompactados e as tags link tenham sido adicionadas na tag head do seu HTML, basta acessar a aplicação pelo navegador.
E verificar que o seu ícone já está disponível:
Considerações finais
Adicionar favicons a projetos com HTML é algo muito simples que acaba sendo muito interessante do ponto de vista da identidade da sua aplicação.
