buenodc

Ícones são elementos visuais importantes para a identidade visual de um site. Eles podem ser utilizados para representar ações, categorias, ou simplesmente para decorar o layout. Dentro de um site podemos encontrar os ícones em duas categorias: ícones de identidade e ícones de interface.

Os ícones de identidade, ou mais conhecidos como favicons, representam a identidade visual do site ou aplicativo (aparece em abas, marcadores e atalhos de dispositivos). Já os ícones de interface, também conhecidos por biblioteca de ícones são utilizados para representar ações, categorias, ou simplesmente para decorar o layout.

A seguir vamos aprender como adicionar ícones de identidade e ícones de interface ao seu site ao seu site.

Adicionando Favicons

O favicon é aquele pequeno ícone que aparece na aba do navegador, favoritos ou barra de endereços. Ele ajuda na identificação visual do site e melhora sua aparência. Adicionar um favicon ao seu site é simples e requer apenas alguns passos básicos.

1. Crie ou obtenha o favicon

O primeiro passo é criar o ícone que será utilizado como favicon. O ícone costuma ter o tamanho de 32x32 pixels e ser salvo no formato .ico, .png ou .svg. Você pode utilizar ferramentas como Favicon.io para criar o ícone.

2. Adicione o favicon no seu HTML

Coloque o arquivo do favicon na pasta raiz do seu projeto (ou em uma pasta como /assets ou /img). No <head> do seu HTML, adicione a tag <link> para referenciar o favicon.

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

3. Teste o favicon

Abra seu site no navegador e verifique se o ícone aparece na aba. Caso o favicon não carregue, confira o caminho e o formato do arquivo.

Adicionando Emoji como Favicon

Existe um ideia mais recente para você incorporar um emoji como favicon do seu site. Basta você adicionar a tag link no seu html e trocar o emoji.

1
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

Adicionando Ícones

Existem diversas bibliotecas de ícones disponíveis na web que podem ser gratuitas ou pagas. As bibliotecas possuem maneiras diferentes de serem incorporadas ao seu site, mas a maioria delas segue um padrão semelhante, mas isso é algo que você precisa estar atento a documentaçõa da biblioteca.

1. Escolha uma Biblioteca de Ícones

Escolha uma biblioteca de ícones que atenda às suas necessidades. Alguns exemplos populares são:

2. Adicione a biblioteca ao seu site

Cada biblioteca de ícones possui um método de instalação específico. Um método bastante comum é utilizar a biblioteca como se fosse uma fonte web, dessa maneira, basta você precisa adicionar um link para o arquivo CSS da biblioteca no <head> do seu HTML para importar a biblitoeca.

1
<link
2
  rel="stylesheet"
3
  href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"
4
/>

3. Utilize os ícones

Depois de adicionar a biblioteca de ícones ao seu site, você pode começar a utilizá-los em seu código HTML. Novamente, cada biblioteca pode possuir uma ou mais formas particulares de sobre como incorporar e utilizar os ícones. Uma maneira comum de adicionar um ícone é através de uma tag <i> com a classe correspondente.

1
<i class="fa fa-heart"></i>

Outro aspecto importante é que você pode personalizar os ícones utilizando CSS. Por exemplo, você pode alterar a cor, o tamanho, a sombra, a rotação, entre outros. Veja o exemplo abaixo:

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Icon-font</title>
7
    <link
8
      rel="stylesheet"
9
      href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"
10
    />
11
    <style>
12
      .fa {
13
        font-size: 50px;
14
      }
15

16
      .fa-heart {
17
        color: red;
18
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
19
        transform: rotate(-20deg);
20
      }
21
    </style>
22
  </head>
23
  <body>
24
    <i class="fa fa-info"></i>
25
    <i class="fa fa-heart"></i>
26
    <i class="fa fa-code"></i>
27
  </body>
28
</html>

Você pode incorporar ícones em qualquer parte do seu site, como em botões, links, menus, ou até mesmo como elementos decorativos. Veja um exemplo de como adicionar um ícone em um botão:

1
<button><i class="fa fa-search"></i> Buscar</button>

Como adiconar ícones ao seu site