HTML Favicon
Um favicon é uma pequena imagem exibida ao lado do título da página na guia do navegador.
Como adicionar um favicon em HTML
Você pode usar qualquer imagem que desejar como seu favicon. Você também pode criar seu próprio favicon em sites como https://favicon.cc .
Dica: Um favicon é uma imagem pequena, portanto, deve ser uma imagem simples com alto contraste.
Uma imagem favicon é exibida à esquerda do título da página na guia do navegador, assim:
Para adicionar um favicon ao seu site, salve sua imagem favicon no diretório raiz do seu servidor web ou crie uma pasta no diretório raiz chamada images e salve sua imagem favicon nesta pasta. Um nome comum para uma imagem favicon é "favicon.ico".
Em seguida, adicione um <link>elemento ao seu arquivo "index.html", após o <title>elemento, assim:
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>My Page
Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Agora, salve o arquivo "index.html" e recarregue-o em seu navegador. A guia do seu navegador agora deve exibir sua imagem favicon à esquerda do título da página.
Suporte ao formato de arquivo Favicon
A tabela a seguir mostra o suporte ao formato de arquivo para uma imagem favicon:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Resumo do capítulo
- Use o elemento HTML
<link>para inserir um favicon
Tag de link HTML
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .