Um favicon é um ícone que está associado à sua aplicação web. Estes ícones, que aparecem nas abas do navegador ou na barra de favoritos, facilitam a identificação da sua aplicação entre as abas ou favoritos do usuário.
Geralmente, este ícone é uma imagem pequena com a extensão .ico; vale ressaltar que, hoje em dia, já é possível criar favicons utilizando imagens com outras extensões como .png e .gif ou até mesmo .jpeg e .svg, dependendo do navegador utilizado. No entanto, é melhor utilizar imagens no formato .ico, .png e .gif, pois esses formatos possuem maior compatibilidade entre os navegadores.
Como o favicon é uma imagem pequena, é uma boa prática utilizar uma imagem do tamanho correto para o navegador. Isso é necessário porque, utilizar uma imagem maior (como por exemplo 330X330) e fazê-la ficar pequena, é um desperdício de recursos.
O tamanho recomendado para o favicon pode variar de acordo com o browser ou do local onde este ícone aparece dentro do browser. Diferentes ferramentas, oferecem diferentes diretivas sobre qual deve ser o tamanho do favicon; é, portanto, uma boa prática ter diferentes tamanhos do ícone disponíveis.
Criando um Favicon
Para criar o Favicon, eu utilizarei o site Favicon.io, que pode ser acessado clicando aqui. Rolando a página para baixo, 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 transforma emojis em favicons.
Caso você opte pela opção de imagem, vai precisar fazer o upload de uma imagem. Já na opção de texto, você deve selecionar o texto, cor de fundo, tamanho da letra e fonte. Por fim, na opção de utilizar um emoji, só é preciso escolher o emoji.
Dessa forma, qualquer uma dessas opções gerará um arquivo .zip contendo vários arquivos .ico em diferentes tamanhos. Para este artigo, usarei um favicon de emoji por ser a mais simples.
Uma vez que você tenha clicado no emoji que deseja ter como favicon, a página abaixo aparece
Aqui, basta clicar em Download para fazer o download do pacote de favicons. Rolando a página para baixo, você verá informações sobre os arquivos que existem nesse .zip, assim como o código necessário para adicionar o favicon à sua aplicação.
Lembrando que é importante mencionar que este código automático espera que as imagens referentes ao seu favicon estejam na mesma pasta que o arquivo onde o código será colado. Caso as imagens estejam em outro local, será preciso alterar a propriedade href.
Nas próximas seções do artigo, mostrarei como adicionar favicons em diferentes tipos de projeto, sinta-se à vontade para ir direto para o que mais te interessar. Os projetos abordados são: HTML, React, Vue, Next, Angular.
Inserindo o favicon em uma página HTML
Aqui, para colocar o favicon no seu projeto, basta descompactar o arquivo .zip e copiar os ícones da pasta descompactada para o projeto. No entanto, caso prefira, você também pode copiar a pasta inteira para o projeto.
Em seguida, agora que os favicons estão no seu projeto, basta colar os códigos fornecidos pelo site dentro da tag <head> do seu arquivo html, ajustando a propriedade href se necessário.
Em seguida, basta acessar a página, e o ícone já estará disponível:
Inserindo o favicon no seu projeto React
Para modificar o favicon de um projeto React, você precisa adicionar os novos favicons à pasta public e editar o arquivo index.html na mesma pasta. Uma vez no arquivo index.html, você deve colar o código copiado do site dentro da tag <head>, e alterar a propriedade href de todos os links para que comecem com %PUBLIC_URL% . Então, basta colocar o caminho para os favicons a partir da pasta public.
Por fim, basta iniciar o servidor de desenvolvimento do projeto e o favicon já estará atualizado.
Inserindo o favicon no seu projeto Vue
Nesse caso, para modificar o favicon de um projeto Vue, você precisa adicionar os novos favicons à pasta public e editar o arquivo index.html na mesma na pasta.
Uma vez no arquivo index.html, você deve colar o código copiado do site dentro da tag <head>, e alterar a propriedade href de todos os links para que comecem com <%= BASE_URL %> ; depois disso, basta colocar o caminho para os favicons a partir da pasta public.
Caso os favicons estejam em uma pasta dentro da pasta public, não é necessário colocar / depois de <%= BASE_URL %>
Assim, iniciando o servidor de desenvolvimento, conseguimos ver o favicon funcionando.
Inserindo o favicon no seu projeto Next
Em projetos Next, o favicon (ou pasta de favicons) deve estar na pasta public. Depois de ter adicionado os favicons, é preciso acessar o arquivo index.js que se encontra na pasta pages, e colar o código do site dentro do componente <Head>. Aqui, um / representa a pasta public; a partir dela, você deve definir o caminho relativo para os seus favicons.
Feito isso, se rodarmos o servidor de desenvolvimento, o favicon estará atualizado.
Inserindo o favicon no seu projeto Angular
Já em um projeto Angular, os favicons devem ser colocados na pasta assets, dentro de src. Depois, o arquivo index.html também na pasta src deve ser editado, tendo o código disponibilizado pelo site colando dentro da tag <head>. Aqui, o caminho que deve ser especificado na propriedade href é o caminho relativo para os recursos que se encontram dentro de assets.
Rodando o projeto, vemos que o novo favicon já está disponível.
Considerações finais
O processo de colocar o favicon é rápido e este recurso representa a sua aplicação visualmente, o que é muito interessante do ponto de vista do usuário. A maioria dos projetos que envolvem algum framework já vem com um favicon padrão; portanto, uma vez que você tenha adicionado seus favicons no projeto, pode deletar a imagem padrão.
Bons estudos!!
