{"id":4672,"date":"2017-04-25T10:06:45","date_gmt":"2017-04-25T13:06:45","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriais\/?p=4672"},"modified":"2025-04-09T04:20:13","modified_gmt":"2025-04-09T07:20:13","slug":"como-adicionar-favicon-no-site","status":"publish","type":"post","link":"\/br\/tutoriais\/como-adicionar-favicon-no-site\/","title":{"rendered":"Como adicionar um favicon ao seu site"},"content":{"rendered":"

Ao estudar sobre desenvolvimento e criação de sites<\/a>, você provavelmente vai encontrar o termo favicon. Mas o que é isso exatamente? Bem, neste artigo nós responderemos à sua pergunta e mostraremos como adicionar um favicon ao seu site. Vamos começar?<\/p>

\"\"<\/a><\/figure>

O Que é um Favicon e Por Que Ele é Importante?<\/h2>

De maneria simplificada, um favicon é o logotipo do seu site que aparece ao lado do meta título na guia do navegador. Em outras palavras, em vez de mostrar um ícone de documento em branco no navegador, seu site exibirá o ícone oficial do seu site.<\/p>

A maioria dos sites geralmente usa seu logotipo como favicon. Se o seu site não tiver um logotipo, você pode simplesmente criar um com um gerador de logo<\/a> gratuito. Dessa forma, seus visitantes perceberão facilmente em qual aba está o seu site quando abrirem várias guias em uma única janela do navegador. Além disso, seu site ficará muito mais profissional.<\/p>

\"Favicon<\/figure>

Como Adicionar um Favicon ao seu Site?<\/h2>

Escolha uma das duas maneiras abaixo para adicionar um favicon ao seu site!<\/p>

Permitir que os Navegadores Gerem o Ícone Automaticamente<\/h3>

A maneira mais fácil de adicionar um ícone ao seu site é fazer seu upload como um arquivo .png<\/strong> ou .ico<\/strong> do Gerenciador de Arquivos<\/strong> da sua hospedagem<\/a>. Siga estas etapas para fazer isso:<\/p>

    \r\n
  1. Prepare uma imagem quadrada em formato .png ou .ico para o logotipo do seu site.
    \n
    \n \n \n <\/svg>\n

    \n Dica <\/p>\n <\/div>\n

    Se você já tiver um arquivo .png<\/strong> use-o. No entanto, converta a imagem para o formato .ico <\/strong>usando ConvertICo.com<\/a> se precisar.<\/p>\n <\/div>\n <\/li>\r\n\r\n\r\n\r\n

  2. Renomeie a imagem .png ou .ico para favicon.
    \n
    \n \n \n <\/svg>\n

    \n Dica <\/p>\n <\/div>\n

    A maioria dos navegadores detecta automaticamente os arquivos favicon.png<\/strong> e favicon.ico<\/strong> localizados no diretório do seu site como o ícone do seu site. Portanto, você não precisará de códigos para isso.<\/p>\n <\/div>\n <\/li>\r\n\r\n\r\n\r\n

  3. Acesse sua pasta public_html<\/strong> através do seu hPanel<\/strong> e depois vá para Gerenciador de Arquivos -> Ir para o gerenciador de arquivos<\/strong>.\"Fazendo<\/li>\r\n\r\n\r\n\r\n
  4. Faça upload do arquivo Favicon.png <\/strong>ou .ico<\/strong> na sua pasta public_html<\/strong>. Recarregue seu site e você verá o Favicon.<\/li>\r\n<\/ol>

    Faça Upload de uma Imagem Normal e Edite o Arquivo header.php do seu Tema<\/h3>

    Como alternativa, se você tiver uma imagem diferente do formato .png<\/strong> ou .ico <\/strong>(ex.: jpg, BMP, gif etc.), também poderá usá-la como ícone do seu site. No entanto, você precisa modificar o arquivo header.php em sua pasta de tema atual. Para fazer isso, execute estas etapas no seu hPanel.<\/p>

      \r\n
    1. Pegue uma imagem de dimensão quadrada para usar como seu logotipo, vá para Gerenciador de arquivos -> Ir para o gerenciador de arquivos -> public_html<\/strong>.<\/li>\r\n\r\n\r\n\r\n
    2. Faça uplaod da imagem em sua pasta public_html.
      \"Fazer
      \n
      \n \n \n <\/svg>\n

      \n Dica <\/p>\n <\/div>\n

      Você pode manter o nome original da imagem ou renomeá-la para favicon<\/strong>. Recomenda-se renomear o ícone para diferenciá-lo de outras imagens.<\/p>\n <\/div>\n <\/li>\r\n\r\n\r\n\r\n

    3. Vá até a a pasta wp-content -> themes<\/strong>. Em seguida, acesse a pasta do tema que você está usando no momento.<\/li>\r\n\r\n\r\n\r\n
    4. Abra o arquivo header.php<\/strong> e cole a seguinte sintaxe antes do final da tag <head><\/head><\/strong>:<\/li>\r\n<\/ol>
      <link rel=\"shortcut icon\" type=\"image\/jpg\" href=\"\/br\/favicon.jpg\"\/><\/pre>
      \"Inserindo<\/figure>
      \r\n\r\n\r\n        
      \n            
      \n                \n                    \n                <\/svg>\n                
      \n                    Dica                <\/p>\n            <\/div>\n            
      Altere os trechos \/jpg e <\/strong>\/favicon.jpg<\/strong> de acordo com o formato e o nome da imagem que você está prestes a usar.<\/p>\n                    <\/div>\n        \n\r\n\r\n\r\n<\/p>
        \r\n
      1. Depois de salvar suas alterações, a imagem agora deve ser exibida como o ícone do seu site.<\/li>\r\n<\/ol>
        \r\n\r\n\r\n        
        \n            
        \n                \n                    \n                <\/svg>\n                
        \n                    Dica                <\/p>\n            <\/div>\n            
        Se você não conseguir ver o novo favicon, Se você não conseguir ver o novo favicon, limpe o cache do navegador<\/a> e reinicie o navegador.<\/p>\n                    <\/div>\n        \n\r\n\r\n\n
        \"\"<\/a><\/figure>\n\r\n\r\n\r\n<\/p>
        Conclusão<\/h2>
        Como você pode ver, ter um favicon no seu site é algo crucial. Ele não apenas torna seu site único nas abas do navegador, como também dá uma aparência profissional ao seu site.<\/p>
        Você pode adicioná-lo automaticamente fazendo upload de uma imagem .png<\/strong> ou .ico<\/strong> chamada favicon <\/strong>na sua pasta public_html<\/strong>. Como alternativa, você pode fazer upload de uma imagem normal (jpg, BMP, gif, etc.) e modificar o arquivo header.php<\/strong> dentro da pasta do seu tema atual.<\/p>
        Este tutorial foi útil? Deixe um comentário abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":"
        Ao estudar sobre desenvolvimento e criação de sites, você provavelmente vai encontrar o termo favicon. Mas o que é isso exatamente? Bem, neste artigo nós responderemos à sua pergunta e mostraremos como adicionar um favicon ao seu site. Vamos começar? O Que é um Favicon e Por Que Ele é Importante? De maneria simplificada, um […]<\/p>\n
        Read More…<\/a><\/p>\n","protected":false},"author":74,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Quer saber o que \u00e9 favicon e como adicionar um ao seu site ou blog? Mostramos tr\u00eas m\u00e9todos com passo a passo simples para fazer voc\u00ea mesmo!","rank_math_focus_keyword":"Favicon wordpress","footnotes":""},"categories":[4941],"tags":[6256,6258,6257],"class_list":["post-4672","post","type-post","status-publish","format-standard","hentry","category-desenvolvimento-web","tag-adicionar-favicon","tag-favicon-para-blog","tag-favicon-para-site"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-favicon\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adicionar-favicon-no-site\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/favicon-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-favicon-wordpress\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-favicon\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/favicon-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-favicon\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-favicon-no-site\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=4672"}],"version-history":[{"count":28,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4672\/revisions"}],"predecessor-version":[{"id":40713,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4672\/revisions\/40713"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=4672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=4672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=4672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}