Ola Isabella.
Para voce não ficar só na teoria veja se o conteudo abaixo te ajuda:
O favicon é o ícone que aparece na aba do navegador ao lado do título da página.
Para adicionar:
Gere seu favicon (em .ico
, .png
, etc.) usando sites gratuitos como:
Coloque os arquivos na pasta do seu site.
No <head>
do seu HTML, insira:
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Essas linhas indicam ao navegador qual imagem usar como favicon em diferentes contextos (desktop, mobile, etc.).
Existem várias formas de usar ícones.
Aqui vão as mais simples.
Baixe ícones de sites como:
Depois, use assim:
HTML:
<img src="icons/heart.svg" alt="Coração">
Ou no CSS:
.icone {
width: 24px;
height: 24px;
background-image: url('icons/heart.svg');
background-size: contain;
background-repeat: no-repeat;
}
Você pode usar bibliotecas que fornecem ícones como se fossem texto. Exemplo com Font Awesome:
No <head>
:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
No corpo do HTML:
<i class="fa fa-heart"></i>
No CSS:
.fa {
font-size: 20px;
color: red;
}
Você pode copiar e colar o código SVG direto no HTML.
Exemplo:
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 21.35l-1.45-1.32C5.4 15.36..."></path>
</svg>
CSS:
svg {
width: 24px;
height: 24px;
color: blue;
}
Se o SVG usar fill="currentColor"
, ele herda a cor do CSS.
Dicas :
- Para ícones leves e modernos, experimente bibliotecas como Feather Icons, Bootstrap Icons ou Material Icons.
- Prefira SVG a PNG sempre que possível (são vetoriais e leves).
- Teste o favicon em modo anônimo, pois navegadores podem guardar o antigo em cache.
Com essas opções, você já pode personalizar sua página com ícones visuais e um favicon que representa seu site.
Simples, prático e com aparência profissional.
Se ficar na duvida ou quiser saber mais comente ai.
Bons estudos.