Como adicionar um Favicon no seu site [Tutorial]

Robson dos Santos 11/08/2023 0 Comentários Leitura: 5 min

O favicon, também conhecido como ícone de site, é a pequena imagem que aparece na aba do navegador ao lado do título da página. Embora seja um detalhe visual discreto, o favicon desempenha um papel importante na identificação e reconhecimento do seu site pelos usuários.

Geralmente o favicon possui a extensão .ico, embora atualmente seja possível usar outros formatos como .png, .gif, .jpeg e .svg. No entanto, .ico, .png e .gif são recomendados para melhor compatibilidade entre navegadores. É importante escolher o tamanho adequado para o favicon, pois usar uma imagem grande e reduzi-la desperdiça recursos.

O tamanho ideal pode variar entre navegadores e onde o ícone é exibido. É aconselhável ter várias versões do ícone com diferentes tamanhos para garantir a melhor exibição.

Neste artigo, vamos explorar como adicionar um favicon ao seu projeto, passando por diversas tecnologias populares, como HTML puro, React, Vue, Next e Angular.

Criando um Favicon

Antes de começarmos, precisamos criar o nosso favicon. Uma ferramenta popular para isso é o site favicon.io. Siga esses passos para criar seu próprio favicon:

Untitled 1 1024x362 1 - Como adicionar um Favicon no seu site [Tutorial]

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.

Untitled 2 1024x739 1 - Como adicionar um Favicon no seu site [Tutorial]

Uma vez que você tenha clicado no emoji que deseja ter como favicon, a página abaixo aparece

Untitled 3 1024x543 1 - Como adicionar um Favicon no seu site [Tutorial]

Agora, clique em “Baixar” para obter o pacote de ícones do site. Ao rolar a página para baixo, você encontrará detalhes sobre os arquivos contidos no arquivo .zip, bem como o código necessário para incorporar o favicon à sua aplicação.

Untitled 4 1024x631 1 - Como adicionar um Favicon no seu site [Tutorial]

É importante destacar que esse código automático presume que as imagens relacionadas ao seu favicon estejam na mesma pasta que o local onde o código será inserido. Se as imagens estiverem em um diretório diferente, será necessário ajustar a propriedade href.

Nas próximas partes deste artigo, vou demonstrar como adicionar favicons em diferentes tipos de projetos. Fique à vontade para ir diretamente para a seção que mais lhe interessa. Os projetos abordados incluem: HTML, React, Vue, Next e Angular.

Inserindo o favicon em uma página HTML

Após criar o favicon, é hora de inseri-lo em sua página HTML. Adicione o seguinte código dentro da tag <head> do seu arquivo HTML:

<link rel="icon" href="caminho-para-o-seu-favicon.ico" type="image/x-icon">

Substitua "caminho-para-o-seu-favicon.ico" pelo caminho relativo ou absoluto para o arquivo do favicon que você baixou.

Outro exemplo:

Untitled 5 1024x339 1 - Como adicionar um Favicon no seu site [Tutorial]

Acesse a página para vizualizar o ícone:

Untitled 6 - Como adicionar um Favicon no seu site [Tutorial]

Inserindo o favicon no seu site com React

Para adicionar um favicon a um projeto React, você pode seguir estes passos:

Copie o arquivo do favicon para a pasta pública do seu projeto (normalmente chamada de public).
Abra o arquivo public/index.html e adicione o seguinte código dentro da tag <head>: Você também pode 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.

<link rel="icon" href="%PUBLIC_URL%/seu-favicon.ico" type="image/x-icon">

Outro exemplo:

Untitled 7 1024x334 1 - Como adicionar um Favicon no seu site [Tutorial]

Por fim, basta iniciar o servidor de desenvolvimento do site e o favicon já estará atualizado.

Untitled 8 1024x604 1 - Como adicionar um Favicon no seu site [Tutorial]

Inserindo o favicon no seu site com Vue

No Vue.js, o processo é semelhante:

Copie o arquivo do favicon para a pasta public do seu projeto Vue.
Abra o arquivo public/index.html e adicione o código a seguir dentro da tag <head>: Ttambém é possivel 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 %>

<link rel="icon" href="<%= BASE_URL %>seu-favicon.ico" type="image/x-icon">

Outro exemplo:

Untitled 9 1024x327 1 - Como adicionar um Favicon no seu site [Tutorial]

Por fim, basta iniciar o servidor de desenvolvimento do site e o favicon já estará atualizado.

Untitled 10 1024x533 1 - Como adicionar um Favicon no seu site [Tutorial]

Inserindo o favicon no seu site com Next.js

Para projetos Next.js, siga estas etapas:

Copie o arquivo do favicon para a pasta public do seu projeto Next.js.
Abra o arquivo pages/_document.js e adicione o código abaixo dentro do componente <Head>:

<link rel="icon" href="/seu-favicon.ico" type="image/x-icon" />

Outro exemplo:

Untitled 11 1024x391 1 - Como adicionar um Favicon no seu site [Tutorial]

Feito isso, se rodarmos o servidor de desenvolvimento, o favicon estará atualizado.

Untitled 12 1024x353 1 - Como adicionar um Favicon no seu site [Tutorial]

Inserindo o favicon no seu site Angular

Em projetos Angular, faça o seguinte:

Copie o arquivo do favicon para a pasta src do seu projeto Angular.
Abra o arquivo src/index.html e adicione o código 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.

Untitled 13 1024x372 1 - Como adicionar um Favicon no seu site [Tutorial]

Rodando o projeto, vemos que o novo favicon já está disponível.

Untitled 14 1024x402 1 - Como adicionar um Favicon no seu site [Tutorial]

Conclusão

Adicionar um favicon ao seu projeto é um processo simples, mas pode ter um impacto significativo na identidade visual e reconhecimento do seu site pelos usuários. Independentemente do framework que você está usando, os passos básicos são os mesmos: crie ou escolha um favicon, insira o link na tag <head> do seu arquivo HTML e garanta que o arquivo do favicon esteja acessível. Com este guia, você está pronto para adicionar favicons a projetos desenvolvidos com diferentes tecnologias.