{"id":11889,"date":"2023-11-07T20:20:45","date_gmt":"2023-11-07T23:20:45","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=11889"},"modified":"2024-01-23T20:06:31","modified_gmt":"2024-01-23T23:06:31","slug":"metatag-favicon","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/wordpress\/metatag-favicon\/","title":{"rendered":"Como configurar a metatag favicon em HTML"},"content":{"rendered":"\n

Voc\u00ea j\u00e1 reparou na pequena imagem que aparece na guia do navegador quando voc\u00ea visita um site? Al\u00e9m disso, essa imagem, tamb\u00e9m conhecida como favicon<\/a>, desempenha um papel importante na identidade e experi\u00eancia do usu\u00e1rio. <\/p>\n\n\n\n

Neste tutorial, vamos aprender como implementar o \u00edcone em um site usando o protocolo FTP e, al\u00e9m disso, por meio do c\u00f3digo HTML<\/a>. Al\u00e9m disso, o favicon \u00e9 um pequeno \u00edcone exibido na aba do navegador ao lado do t\u00edtulo da p\u00e1gina<\/strong>, e, portanto, \u00e9 uma \u00f3tima maneira de personalizar e dar uma identidade visual ao seu site. <\/p>\n\n\n\n

Caso voc\u00ea ainda n\u00e3o tenha seu \u00edcone pronto, n\u00e3o se preocupe. Voc\u00ea pode criar o favicon<\/a> a partir de uma im\u00e1gem, ou ent\u00e3o, pode usar um gerador de favicon<\/a>.<\/p>\n\n\n\n

Agora, vamos come\u00e7ar!<\/p>\n\n\n\n

Como adicionar a MetaTag do favicon em HTML em sua hospedagem de site<\/h2>\n\n\n\n

Passo 1: Acesso aos arquivos do site<\/strong><\/p>\n\n\n\n

Para adicionar o Favicon ao seu site, \u00e9 necess\u00e1rio acessar os arquivos do site por meio de um cliente FTP<\/a> (File Transfer Protocol). Al\u00e9m disso, existem v\u00e1rias op\u00e7\u00f5es de clientes FTP dispon\u00edveis, tais como o FileZilla<\/a>, o Cyberduck e o WinSCP. \u00c9 importante escolher a op\u00e7\u00e3o que melhor se adapta \u00e0s suas necessidades e realizar o download do cliente escolhido.<\/p>\n\n\n\n

Depois de instalar e configurar o cliente FTP com as informa\u00e7\u00f5es de conex\u00e3o corretas, como servidor, nome de usu\u00e1rio, senha e porta, voc\u00ea estar\u00e1 pronto para prosseguir.<\/p>\n\n\n\n

Em nosso exemplo, usaremos o painel de controle da hospedagem de sites<\/a> para editar o arquivo HTML.<\/p>\n\n\n\n

\"painel<\/figure>\n\n\n\n

Passo 2: Localiza\u00e7\u00e3o correta para o arquivo Favicon<\/strong><\/p>\n\n\n\n

Antes de adicionar seu icone, \u00e9 crucial entender onde posicion\u00e1-lo. Primeiramente, o arquivo deve ser armazenado na raiz do diret\u00f3rio do seu site. Isso implica que ele deve ocupar a mesma localiza\u00e7\u00e3o que o arquivo “index.html<\/a>” ou qualquer outra p\u00e1gina principal do seu site. Al\u00e9m disso, \u00e9 fundamental garantir que ele esteja no formato adequado, como .ico, .png ou .jpg.<\/p>\n\n\n\n

Dica: Na maioria das hospedagens, a raiz do diret\u00f3rio \u00e9 o “public_html<\/strong>“.<\/p>\n\n\n\n

\"pasta<\/figure>\n\n\n\n

Passo 3: C\u00f3digo HTML para adicionar o Favicon ao site<\/strong><\/p>\n\n\n\n

Depois de ter seu arquivo favicon pronto e localizado corretamente, agora \u00e9 hora de adicionar o c\u00f3digo HTML para que ele seja exibido no seu site.<\/p>\n\n\n\n

Dentro da tag <head> do seu arquivo HTML, insira o seguinte c\u00f3digo:<\/p>\n\n\n\n

<link rel=\"icon\" href=\"favicon.ico\" type=\"image\/x-icon\"><\/em><\/code><\/pre>\n\n\n\n
O c\u00f3digo a cima \u00e9 uma meta tag<\/a> do Favicon.<\/p>\n\n\n\n
Certifique-se de substituir “favicon.ico” pelo nome correto do arquivo Favicon que voc\u00ea est\u00e1 usando. Se o arquivo estiver em um diret\u00f3rio diferente, voc\u00ea precisar\u00e1 especificar o caminho correto no atributo “href”.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Passo 4: Salvar e enviar os arquivos para o servidor<\/strong><\/p>\n\n\n\n
Ap\u00f3s adicionar o c\u00f3digo HTML, salve o arquivo e envie todos os arquivos atualizados para o servidor usando o cliente FTP. Certifique-se de que o arquivo esteja na raiz do diret\u00f3rio do seu site, conforme mencionado anteriormente.<\/p>\n\n\n\n
Passo 5: Verificar a implementa\u00e7\u00e3o do Favicon<\/strong><\/p>\n\n\n\n
Ap\u00f3s enviar os arquivos para o servidor, abra o seu site em um navegador e verifique se o icone est\u00e1 sendo exibido corretamente na aba. Caso contr\u00e1rio, limpe o cache do navegador e atualize a p\u00e1gina para ver as altera\u00e7\u00f5es.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Dicas adicionais:<\/strong><\/p>\n\n\n\n