26 de novembro de 2024Atualizado em 25 de outubro de 202610 min de leitura

Como adicionar ícones ao seu site

Um site costuma usar ícones de dois tipos. O ícone de identidade, chamado de favicon, representa o site fora da página: na aba do navegador, nos favoritos e no atalho da tela inicial do celular. Os ícones de interface ficam dentro da página e ajudam a pessoa a entender o que cada parte faz: uma lupa no botão de busca, uma casinha no link para a página inicial.

Este tutorial mostra os dois e termina com um exemplo completo.

Favicon: o ícone do site

Quando alguém deixa várias abas abertas, o título da página some e sobra só o ícone. É pelo favicon que a pessoa encontra o seu site no meio das outras abas, na lista de favoritos e no histórico. Um site sem favicon mostra um ícone genérico do navegador.

Os formatos do favicon

O favicon pode ser salvo em mais de um formato, e cada um resolve um problema:

.ico é o formato mais antigo. Um único arquivo .ico pode guardar o mesmo desenho em vários tamanhos, e todo navegador entende esse formato.
.png é uma imagem comum. Funciona em todos os navegadores atuais.
.svg é vetorial (fica nítido em qualquer tamanho) e costuma ser o menor arquivo. Nos navegadores que aceitam favicon em SVG, ele pode até mudar de cor no tema escuro, com uma regra de CSS dentro do próprio arquivo.
apple-touch-icon é um PNG de 180x180 pixels que o iPhone e o iPad usam quando a pessoa adiciona o site à tela inicial.

Para a maioria dos sites, basta um conjunto pequeno: um .ico para os navegadores antigos, um .svg para os atuais e o PNG da Apple. O navegador escolhe o melhor que entender.

index.html

<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

1. Crie ou obtenha o favicon

O favicon é pequeno: na aba, ele aparece com uns 16 pixels. Por isso, um desenho simples, como a inicial do site ou um símbolo, funciona melhor que um logotipo cheio de detalhes. Se você não tem um, o Favicon.io gera os arquivos a partir de uma imagem, de um texto ou de um emoji.

2. Adicione o favicon no HTML

Coloque os arquivos na pasta raiz do projeto (ou numa pasta como /assets ou /img) e, no <head> do HTML, adicione uma tag <link> para cada arquivo, como no conjunto acima. O atributo rel="icon" diz ao navegador que aquele arquivo é o ícone do site. O type informa o formato e o href diz onde o arquivo está: se ele estiver em outra pasta, ajuste o caminho.

3. Teste o favicon

Abra o site no navegador e veja se o ícone aparece na aba. Se não aparecer, confira o caminho e o formato do arquivo.

Usando um emoji como favicon

Para um projeto rápido, dá para usar um emoji como favicon, sem precisar de arquivo. A tag abaixo monta um SVG pequeno dentro do próprio href, com o emoji como texto. Troque o 🚀 pelo emoji que quiser:

<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>">

O emoji aparece com o desenho do sistema operacional de quem acessa, então ele muda um pouco entre Windows, Mac, Android e iPhone.

Ícones de interface

Desenhar cada ícone do zero dá muito trabalho, por isso quase todo site usa uma biblioteca de ícones: uma coleção pronta, com centenas de desenhos no mesmo estilo. Essas bibliotecas costumam vir em duas formas.

Como uma biblioteca de ícones funciona

A forma mais comum é a fonte de ícones. É uma fonte, como as fontes de texto, só que cada “letra” é um desenho. Você coloca na página uma tag com uma classe:

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

O CSS da biblioteca encontra essa classe e coloca, antes do elemento, o caractere que corresponde ao coração naquela fonte. Como o ícone é um caractere, ele se comporta como texto: muda de tamanho com font-size e de cor com color, igual a uma palavra.

A outra forma é o ícone em SVG: cada ícone é um arquivo SVG pequeno, que você copia do site da biblioteca e cola no HTML. Bibliotecas como o Bootstrap Icons e o Tabler Icons têm um botão para copiar o SVG de cada ícone.

index.html

<svg class="icone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
  <path d="M12 20C4 14 2 9 5 6C7.5 3.5 11 4.5 12 7C13 4.5 16.5 3.5 19 6C22 9 20 14 12 20Z" />
</svg>

O stroke="currentColor" faz o traço do ícone usar a cor do texto ao redor. Assim, ele acompanha o color do CSS, como a fonte de ícones.

Quando usar cada jeito

	Fonte de ícones (CDN)	SVG no HTML	Imagem em arquivo (`<img>`)
Como instalar	Uma tag `<link>` no `<head>`	Copiar e colar cada ícone	Salvar o arquivo e usar `<img>`
O que o navegador baixa	A biblioteca inteira. No Font Awesome, o CSS tem cerca de 90 KB e a fonte dos ícones sólidos, cerca de 117 KB	Só os ícones que estão na página	Um arquivo por ícone
Cor acompanha o texto	Sim	Sim, com `currentColor`	Não
Bom para	Começar rápido, protótipos, sites com muitos ícones diferentes	Sites que usam poucos ícones e querem carregar rápido	Ícones coloridos que nunca mudam de cor, como logotipos

Se você está começando, a fonte de ícones é o caminho mais simples: uma linha no <head> e todos os ícones ficam disponíveis. Quando o site estiver pronto e usar só meia dúzia de ícones, trocar por SVG deixa a página mais leve, porque o navegador não precisa baixar centenas de ícones que ninguém vê.

Os exemplos a seguir usam o Font Awesome, mas a maioria das bibliotecas segue um padrão parecido. Consulte a documentação da que você escolher.

1. Escolha uma biblioteca de ícones

Algumas bibliotecas populares e gratuitas:

Escolha uma e use só ela no site. Cada biblioteca tem um estilo próprio (traço fino, preenchido, arredondado), e misturar duas deixa a página com cara de remendo.

2. Adicione a biblioteca ao seu site

Para usar o Font Awesome como fonte de ícones, adicione no <head> um link para o arquivo CSS dele, hospedado num CDN (um serviço que entrega arquivos de bibliotecas pela internet):

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"
/>

O 7.3.1 no endereço é a versão da biblioteca. Fixar a versão garante que o site não mude sozinho quando sair uma versão nova.

3. Utilize os ícones

Com a biblioteca carregada, cada ícone é uma tag <i> com duas classes. No Font Awesome, a primeira indica o estilo (fa-solid para o ícone preenchido, fa-regular para o contorno, fa-brands para logotipos de marcas) e a segunda indica o ícone:

<i class="fa-solid fa-heart"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-brands fa-github"></i>

Para descobrir o nome de um ícone, pesquise no site da biblioteca. A página de cada ícone mostra o código pronto para copiar.

4. Estilize os ícones com CSS

Como os ícones se comportam como texto, você muda a cor, o tamanho, a sombra e a rotação deles com CSS:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ícones com Font Awesome</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"
    />
    <style>
      .fa-solid {
        font-size: 50px;
      }

      .fa-heart {
        color: red;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        transform: rotate(-20deg);
      }
    </style>
  </head>
  <body>
    <i class="fa-solid fa-info"></i>
    <i class="fa-solid fa-heart"></i>
    <i class="fa-solid fa-code"></i>
  </body>
</html>

A rotação funciona porque o Font Awesome exibe os ícones como inline-block. Um elemento puramente inline, como um <span> comum, ignora o transform.

Ícones e leitores de tela

Pessoas com deficiência visual navegam com leitores de tela, programas que leem a página em voz alta. Um ícone é um desenho, e o leitor de tela não sabe o que ele representa. Para que os ícones de interface não atrapalhem essa leitura, siga duas regras:

Se o ícone acompanha um texto, como num botão “Buscar” com lupa, ele é decorativo. Adicione aria-hidden="true" para o leitor de tela ignorá-lo.
Se o ícone aparece sozinho, sem texto, descreva a ação com aria-label no elemento que recebe o clique. Sem isso, o leitor de tela anuncia apenas “botão”, sem dizer para que ele serve.

<!-- Ícone com texto: o ícone é decorativo -->
<button><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i> Buscar</button>

<!-- Ícone sozinho: o botão precisa de um nome -->
<button aria-label="Buscar"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></button>

Exemplo do zero

Um site de uma página com favicon, um menu com ícones, um botão de busca só com ícone e links para redes sociais.

1. Monte a pasta do projeto

meu-site/
├── favicon.svg
├── index.html
└── style.css

2. Crie o favicon

Um favicon em SVG é só um arquivo de texto. Este desenha um quadrado azul com cantos arredondados e a letra M em branco. Troque a letra e a cor pelas do seu site:

favicon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="8" fill="#1a4fa0" />
  <text x="16" y="22" font-family="sans-serif" font-size="18" font-weight="700" text-anchor="middle" fill="#ffffff">M</text>
</svg>

3. Escreva a página

index.html

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meu site</title>
    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="topo">
      <nav class="menu">
        <a href="#"><i class="fa-solid fa-house" aria-hidden="true"></i> Início</a>
        <a href="#"><i class="fa-solid fa-user" aria-hidden="true"></i> Sobre</a>
        <a href="#"><i class="fa-solid fa-envelope" aria-hidden="true"></i> Contato</a>
      </nav>
      <button class="busca" aria-label="Buscar">
        <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
      </button>
    </header>

    <main>
      <h1>Olá, eu sou a Maria</h1>
      <p>Este é o meu primeiro site com ícones.</p>
    </main>

    <footer class="redes">
      <a href="https://github.com/" aria-label="GitHub"><i class="fa-brands fa-github" aria-hidden="true"></i></a>
      <a href="https://instagram.com/" aria-label="Instagram"><i class="fa-brands fa-instagram" aria-hidden="true"></i></a>
    </footer>
  </body>
</html>

Repare em três detalhes:

Os ícones do menu acompanham um texto (“Início”, “Sobre”, “Contato”), então todos têm aria-hidden="true".
O botão de busca e os links das redes sociais só têm ícone. Por isso, quem recebe o aria-label é o <button> e o <a>, que são os elementos clicáveis.
Os logotipos do GitHub e do Instagram usam a classe fa-brands, o estilo de marcas.

4. Escreva o CSS

style.css

body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  color: #1f2937;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu {
  display: flex;
  gap: 1.5rem;
}

.menu a {
  color: inherit;
  text-decoration: none;
}

/* Um pouco de espaço entre o ícone e o texto do link. */
.menu i {
  margin-right: 0.35rem;
}

.menu a:hover {
  color: #1a4fa0;
}

.busca {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: none;
  font-size: 1rem;
  cursor: pointer;
}

.redes {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  font-size: 1.5rem;
}

.redes a {
  color: inherit;
}

.redes a:hover {
  color: #1a4fa0;
}

O color: inherit nos links faz o ícone usar a mesma cor do texto da página, em vez do azul padrão de link. No hover, o color muda, e o ícone muda junto, porque para o navegador ele é texto.

5. Teste

Abra o index.html no navegador e confira:

o quadrado azul com a letra M aparece na aba;
os ícones aparecem no menu, no botão e no rodapé, e mudam de cor quando o mouse passa por cima;
o tamanho dos ícones das redes sociais segue o font-size do .redes.