Mudando um favicon no HTML

O que é um Favicon?

Favicon é um ícone de identificação visual de um site. Ele aparece no topo, nas abas do navegador, ajudando a identificar o site, especialmente quando há várias abas abertas.

Onde encontrar/criar favicons gratuitos?

Site recomendado: Iconarchive

Site recomendado: Favicon.io

Site recomendado: Favicon.cc para desenhar e criar seu favicon personalizado.

Como adicionar favicon no HTML

Abaixo um exemplo visual do esqueleto HTML com a linha do favicon destacada:


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Linha importante: favicon do site -->
    <link rel="shortcut icon" href="SEU_FAVICON_AQUI.ico" type="image/x-icon">
    <title>Seu Título Aqui</title>
</head>

Exemplo com outros formatos de favicon


    <!-- PNG para navegadores modernos -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

    <!-- SVG para alta resolução -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">

    <!-- Fallback para Internet Explorer -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Você pode usar vários formatos ao mesmo tempo para garantir compatibilidade máxima.
O formato .ico é o mais universal, mas PNG e SVG são recomendados para qualidade e transparência.
Na aba do seu navegador acima você verá o favicon do site.

Dicas e boas práticas

O favicon não afeta diretamente a acessibilidade, mas melhora a identificação visual do site.
Favicons bem configurados ajudam na marcação do site em favoritos e atalhos de dispositivos móveis.
Use nomes de arquivos simples e evite espaços ou caracteres especiais.

Ferramentas para criar e converter favicon

RealFaviconGenerator – Gera favicons para todas as plataformas e fornece o código pronto.
Favicon.io – Crie favicons a partir de texto, emoji ou imagens.
Favicon.cc – Editor online para desenhar seu próprio favicon.

Explicação dos principais atributos da tag <link> do favicon

rel: Define o tipo de relação do arquivo
```
("icon", "shortcut icon")
```

type: O tipo MIME do arquivo

(ex: image/x-icon, image/png, image/svg+xml)

sizes: Tamanho do ícone

(ex: 16x16, 32x32, 180x180 para Apple Touch Icon)

href: Caminho para o arquivo do favicon.

Exemplo de favicon para dispositivos Apple


<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

Esse formato é usado quando o usuário adiciona o site à tela inicial do iPhone/iPad.

📘 Aula 7: Mudando o Favicon de um Site 📘