Inserir ícone de guia em HTML
-
Use
<link rel="icon">e uma imagem PNG para adicionar Favicon para o site em HTML -
Use
<link rel="icon">e uma imagem ICO para adicionar favicon para o site em HTML
O ícone de guia é basicamente um pequeno ícone que vemos na guia do navegador. Geralmente parece uma imagem de tamanho muito pequeno com o tamanho mínimo em pixels. Também é conhecido como favicon. Este artigo apresentará métodos para adicionar um ícone de guia do navegador para um site em HTML.
Use <link rel="icon"> e uma imagem PNG para adicionar Favicon para o site em HTML
Podemos usar a tag <link> e o atributo rel="icon" para adicionar um favicon do navegador em HTML. A tag <link> no código conecta o documento atual ao recurso externo. É a tag que geralmente é usada para vincular a folhas de estilo externas. Também é chamado de elemento vazio, pois contém apenas atributos. O atributo rel também é usado para definir a relação entre o recurso atual e um recurso vinculado. Podemos definir o destino do link da imagem para ser usado como um favicon no atributo href. Uma imagem com extensão .png deve ser usada no atributo href.
Em primeiro lugar, você precisa ter a imagem PNG que você usará como seu favicon no seu dispositivo. Deve ter minúsculos pixels. O tamanho mais comum para criar um favicon é 16x16 pixels. No entanto, eles podem aparecer em dimensões um pouco maiores também (32x32). Agora, dentro da tag HTML <head>, abra a tag <link> e use o atributo rel dentro dela. Defina o atributo rel como icon. Depois disso, escreva o atributo href e especifique o arquivo de imagem PNG que você deseja usar como seu favicon entre as aspas. Depois disso, feche todas as tags abertas anteriormente.
Aqui, usamos a imagem favicon.png como favicon. A imagem está localizada no sistema local. Desta forma, podemos adicionar um favicon a uma página da web em HTML.
Código de exemplo:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Use <link rel="icon"> e uma imagem ICO para adicionar favicon para o site em HTML
Podemos usar a imagem ICO para adicionar o favicon em um site em HTML para fins de compatibilidade com versões anteriores. Quase todos os navegadores modernos suportam a imagem PNG para ser usada como favicon. Para navegadores como o IE10 e suas versões anteriores, podemos usar imagens ICO. As imagens ICO têm .ico como extensão. Podemos usar ferramentas como ConvertICO para converter as imagens PNG para ICO.
Por exemplo, navegue no site ConvertICO e carregue o arquivo favicon.png. O site irá converter a imagem para o formato ICO e nos permitirá fazer o download. Em seguida, use o caminho da imagem no atributo href na tag <link> como feito no primeiro método. Então, podemos ver o favicon na página da web.
Código de exemplo:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn