![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/public\")
<\/a><\/figure>\n\n\n\n\n\n
O Que é o Favicon do WordPress?<\/h2>\n
O favicon do WordPress é um ícone exclusivo associado a um site. Normalmente é uma imagem pequena e quadrada com um design que representa a identidade do site. O favicon geralmente aparece no painel do WordPress e nas guias do navegador.<\/p>\n <\/div>\n\n\n\n<\/p>
Por que é Importante Adicionar um Favicon ao seu Site<\/h2>
Um favicon representa a identidade do site WordPress, ajudando as pessoas a reconhecer seu site. Embora a imagem do ícone seja pequena, ela pode impactar bastante a experiência do usuário e a reputação da sua marca. Aqui estão algumas razões pelas quais um favicon no site WordPress é importante:<\/p>
- \n
- Melhora a experiência do usuário<\/strong>. Muitos usuários têm várias guias abertas em seus navegadores. Um favicon ao lado do título do site os ajuda a diferenciar facilmente cada guia e identificar seu site entre elas.<\/li>\n\n\n\n
- Melhora a visibilidade<\/strong>. Se configurado corretamente, seu favicon aparecerá nos resultados da pesquisa ao lado do URL do seu site WordPress. Isso ajuda as pessoas a notarem o seu site e aumenta o tráfego orgânico.<\/li>\n\n\n\n
- Melhora a experiência em dispositivos móveis<\/strong>. Muitos dispositivos mobile permitem que os usuários adicionem qualquer página da Web à tela inicial. Quando eles adicionam um site à tela inicial do dispositivo móvel, ele exibe o favicon como ícone, permitindo que o usuário localize seu site entre vários ícones de aplicativos.<\/li>\n\n\n\n
- Constrói credibilidade<\/strong>. Os favicons do WordPress passam uma sensação de profissionalismo para quem visita um site. Se esse site não tiver um favicon, o navegador usará um ícone padrão que fará com que o site pareça inacabado.<\/li>\n<\/ul>
Como Criar um Favicon no WordPress<\/h2>
O WordPress possui um recurso de favicon nativo, permitindo que você escolha dentre vários métodos para adicionar o seu. No entanto, antes de enviar um arquivo de favicon personalizado para o WordPress, há vários preparativos a serem feitos:<\/p>
- \n
- Certifique-se de que o ícone seja uma imagem quadrada com um tamanho de pelo menos 512 x 512 pixels<\/strong>. Para alterar o tamanho da imagem, use um software de edição como Adobe Photoshop ou geradores de favicon online como RealFaviconGenerator<\/a>, Favicon.io<\/a> e Favicon-generator.org<\/a>.<\/li>\n\n\n\n
- Escolha uma cor de fundo para o favicon<\/strong>. Um plano de fundo transparente é melhor, especialmente se você tiver espaço em branco no design.<\/li>\n\n\n\n
- Escolha o formato de imagem certo<\/strong>. Os favicons do WordPress geralmente usam o formato de arquivo ICO<\/strong>, mas agora você também pode usar JPEG<\/strong> e GIF<\/strong>. No entanto, você deve usar PNG<\/strong> se o plano de fundo do seu ícone for transparente.<\/li>\n<\/ul>
Quando a imagem estiver pronta, adicione o novo favicon ao seu site WordPress usando um dos seguintes métodos.<\/p>
\n\n\n
\nDica<\/h4>\n
Garanta que você tenha um site rápido no WordPress usando um hosting otimizado para o CMS<\/a>.<\/p>\n <\/div>\n\n\n\n
Usando o Bloco do Gutenberg<\/h3>\n\n\n\n
A maneira mais fácil de adicionar um favicon ao WordPress é usando o editor de blocos do Gutenberg<\/a>. Observe que este método só é possível se você usar um tema de blocos e a versão 5.9 ou superior do WordPress. Aqui estão as etapas para fazer isso:<\/p>\n\n\n\n
- \n
- Abra o Editor de Site navegando até Aparência → Personalizar<\/strong> no painel do WordPress.<\/li>\n\n\n\n
- Passe o mouse sobre a área onde deseja colocar o logotipo e clique no botão de inserir bloco (+)<\/strong>. Embora você possa adicionar seu favicon em qualquer lugar do site, recomendamos adicioná-lo à área do cabeçalho.<\/li>\n\n\n\n
- Pesquise o bloco Logo do Site<\/strong> na barra de pesquisa e selecione-o para adicioná-lo ao seu site.
![\"opção](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/logo-do-site-wordpress.jpg\")
<\/li>\n\n\n\n- Clique no botão Add a site logo <\/strong>(Adicionar um logotipo de site) no bloco para abrir o pop-up da biblioteca de mídia.
![\"adição](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/adicionar-logo-site-wordpress.png\")
<\/li>\n\n\n\n- Carregue seu arquivo de imagem ou selecione-o na biblioteca de mídia. Clique em Selecionar<\/strong>.
![\"Pop-up](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/biblioteca-midia-wordpress-popup-com-favicon-selecionado.png\")
<\/li>\n\n\n\n- Você verá a imagem do favicon no bloco do logo do site. Clique no bloco e abra suas Configurações<\/strong> no canto superior direito do editor.<\/li>\n\n\n\n
- Abra a seção Configurações<\/strong> e ative a opção Usar como ícone do site<\/strong>.
![\"A](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/secao-configuracoes-bloco-logo-do-site-com-opcao-usar-como-icone-destacada.png\")
<\/li>\n\n\n\n- Clique em Salvar<\/strong> no canto superior direito do editor.<\/li>\n<\/ol>\n\n\n\n
Usando o Personalizador do WordPress<\/h3>\n\n\n\n
Você pode adicionar um favicon ao personalizar a identidade do site no WordPress Customizer. Este método é mais adequado para usuários de temas clássicos com WordPress versão 4.3 ou superior, pois eles terão o recurso de ícone do site.<\/p>\n\n\n\n
Siga estas etapas para adicionar um favicon usando o WordPress Customizer:<\/p>\n\n\n\n
- \n
- Navegue até Aparência → Personalizador<\/strong> no seu painel. Se a opção não estiver disponível ou se você usar um tema de bloco, use o slug \/wp-admin\/customize.php para abri-lo.<\/li>\n\n\n\n
- Escolha a guia Identidade do site na barra lateral esquerda e clique no botão Selecionar ícone do site.
![\"opção](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/selecionar-icone-do-site.jpg\")
<\/li>\n\n\n\n- O pop-up da biblioteca de mídia do WordPress aparecerá. Faça upload do seu favicon ou escolha uma imagem existente na biblioteca de mídia. Clique em Selecionar<\/strong>.<\/li>\n\n\n\n
- Você verá imediatamente na guia do navegador que o novo favicon está definido. Clique no botão Publicar<\/strong> para salvar a alteração.
![\"Guia](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/favicon-editado-no-site-wp2.jpg\")
<\/li>\n<\/ol>\n\n\n\nUsando um Plugin de Favicon do WordPress<\/h3>\n\n\n\n
Outro método para adicionar um favicon ao WordPress é usando um plugin. Existem vários plugins de favicon do WordPress, mas o Favicon by RealFaviconGenerator<\/a> é o mais bem avaliado. Instale e ative<\/a> o plugin no painel do WordPress e siga estas etapas:<\/p>\n\n\n\n
- \n
- Vá para Aparência → Favicon<\/strong> no painel do WordPress.<\/li>\n\n\n\n
- Clique em Selecionar da Biblioteca de Mídia<\/strong> para fazer upload ou escolher uma imagem de favicon. Você não precisa editar sua imagem usando um software de edição porque o plugin fará isso por você. Idealmente, sua imagem deve ter pelo menos 260 x 260 pixels<\/strong> de tamanho.
![\"O](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/selecionar-favicon-a-partir-da-biblioteca-de-midia.jpg\")
<\/li>\n\n\n\n- Clique em Gerar o favicon<\/strong>. O plugin o levará ao site RealFaviconGenerator<\/strong>, onde você poderá personalizar sua imagem.<\/li>\n\n\n\n
- Selecione Use the original image as is<\/strong> (Usar a imagem original como está) se não quiser alterá-la. Você também pode escolher Add margins and a plain background<\/strong> (Adicionar margens e um plano de fundo simples) se desejar adicionar uma cor de fundo e modificar o tamanho da imagem.
![\"Site](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/site-RealFaviconGenerator-mostrando-opcao-customizar-favicon.png\")
<\/li>\n\n\n\n- Role para baixo até a parte inferior e clique em Generate your Favicon and HTML code<\/strong> (Gerar seu Favicon e código HTML). Ele o levará de volta ao painel de administração do WordPress.
![\"Seção](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/RealFaviconGenerator-gerador-favicon-secao-opcoes-com-opcao-generate-your-favicons-sublinhada.png\")
<\/li>\n<\/ol>\n\n\n\nAgora o favicon do seu site WordPress deve estar no lugar. Você também pode verificar seu favicon no painel de administração do plugin clicando no botão Verificar seu favicon<\/strong>. Ele o levará ao site RealFaviconGenerator<\/strong>, que mostra as prévias do seu favicon em várias plataformas.<\/p>\n\n\n\n
Observe que você não deve desativar este plugin, pois ele desativará automaticamente seu favicon.<\/p>\n\n\n\n
Como Adicionar um Favicon a um Site WordPress Manualmente<\/h3>\n\n\n\n
Outro método é adicionar o favicon ao WordPress manualmente. Este método requer modificar alguns arquivos do WordPress. Portanto, recomendamos testá-lo em um ambiente de preparação do WordPress<\/a> antes de aplicá-lo ao seu site real.<\/p>\n\n\n\n
Você deve usar um gerador como o RealFaviconGenerator<\/a> para criar o pacote favicon e o trecho de código. Aqui estão os passos para fazer isso:<\/p>\n\n\n\n
- \n
- Abra o site RealFaviconGenerator e clique no botão Select your Favicon image<\/strong> (Selecione sua imagem de Favicon) para carregar sua imagem.
![\"Página](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/homepage-do-RealFaviconGenerator-com-o-botao-selecionar-sua-imagem-favicon-destacado.jpg\")
<\/li>\n\n\n\n- Role para baixo até as opções do geração de favicon. Na guia Path<\/strong> (Diretório), a opção padrão é colocar os arquivos de favicon no diretório raiz do seu site. Escolha a segunda opção e defina o caminho caso queira colocá-lo em outro diretório. Clique em Generate your Favicons and HTML code<\/strong> (Gerar seus Favicons e código HTML).
![\"Seção](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/RealFaviconGenerator_s-favicon-generator-secao-opcoes.jpg\")
<\/li>\n\n\n\n- Baixe os arquivos de ícone clicando no botão Favicon package<\/strong> (Pacote Favicon). Ele contém os arquivos PNG<\/strong> e ICO<\/strong> da imagem selecionada. Mantenha esta página aberta, pois você deve copiar o código do favicon posteriormente.
![\"Página](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/pagina-RealFaviconGenerator-com-o-botao-favicon-package-em-destaque.jpg\")
<\/li>\n\n\n\n- Use um cliente FTP<\/a><\/strong> ou o gerenciador de arquivos<\/a><\/strong> da sua conta de hospedagem para acessar o diretório raiz do seu site e fazer upload do pacote de favicon. Você deve fazer o upload e extraí-lo na mesma pasta que os arquivos wp-admin<\/strong> e wp-content<\/strong>.<\/li>\n\n\n\n
- Abra a pasta do seu tema ativo. Por exemplo, se você estiver usando o tema Twenty Twenty, ela está no caminho \/wp-content\/themes\/twentytwenty<\/strong>.
![\"Interface](\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2023\/02\/gerenciador-de-arquivos-hostinger-mostrando-diretorio-do-tema-twenty-twenty.jpg\")
<\/li>\n\n\n\n- Abra o arquivo de modelo header.php<\/strong> e cole o código de favicon que você pegou na página RealFaviconGenerator. Certifique-se de adicionar sua própria URL no atributo href<\/strong>. O resultado ficará tipo assim:<\/li>\n<\/ol>\n\n\n\n
<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"https:\/\/website.com\/apple-touch-icon.png\">
<link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"https:\/\/website.com\/favicon-32x32.png\">
<link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"https:\/\/website.com\/favicon-16x16.png\">
<link rel=\"manifest\" href=\"https:\/\/website.com\/site.webmanifest\">
<link rel=\"mask-icon\" href=\"https:\/\/website.com\/safari-pinned-tab.svg\" color=\"#5bbad5\">
<meta name=\"msapplication-TileColor\" content=\"#da532c\">
<meta name=\"theme-color\" content=\"#ffffff\"><\/pre>\n\n\n\n- \n
- Salve as alterações.<\/li>\n<\/ol>\n\n\n
Importante!<\/strong> Uma atualização de tema pode reverter todas as modificações no arquivo header.php. Use um tema filho<\/a> se quiser modificar seu tema enquanto ele se mantém atualizado.<\/p><\/div>\n\n\n\n
Dicas para Criar um Favicon para seu Site WordPress<\/h2>\n\n\n\n
Ótimos ícones de site permitem que os usuários identifiquem rapidamente uma página da web e criem uma associação de marca duradoura. Aqui estão algumas dicas para criar um favicon exclusivo:<\/p>\n\n\n\n
- \n
- Evite usar textos longos<\/strong>. O tamanho do favicon é tão pequeno que mesmo um texto curto é difícil de ler. Considere criar um design diferente para o favicon do site se o seu logotipo incluir o nome completo da sua empresa.<\/li>\n\n\n\n
- Não o atualize com muita frequência<\/strong>. Um favicon ajuda os clientes a associar a imagem à sua marca. Se você alterar o favicon com muita frequência, será difícil para eles criar essa associação.<\/li>\n\n\n\n
- Escolha o esquema de cores certo<\/strong>. Como muitos navegadores permitem personalizações de sua aparência e o modo noturno está cada vez mais popular, seu favicon deve ficar bonito independente das configurações do browser. Recomendamos testar seu favicon com várias cores de fundo, como branco, cinza e preto.<\/li>\n\n\n\n
- Leia as diretrizes do Google<\/strong>. Siga as diretrizes de favicon do Google<\/a> para que seu favicon seja exibido nos resultados de pesquisa do Google.<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>\n\n\n\nConclusão<\/h2>\n\n\n\n
O favicon no WordPress é um pequeno ícone que representa o seu site nas abas do navegador. Sua presença é importante para melhorar a experiência do usuário e o reconhecimento da sua marca.<\/p>\n\n\n\n
O WordPress possui um recurso de ícone de site integrado, permitindo que você adicione um ícone de favicon usando um destes métodos:<\/p>\n\n\n\n
- \n
- Usando o bloco<\/strong> de ícone do site<\/strong> no editor Gutenberg. Este método é ideal para usuários de temas de blocos.<\/li>\n\n\n\n
- Usando o WordPress Customizer para alterar as configurações de identidade do site.<\/li>\n\n\n\n
- Usando o plugin RealFaviconGenerator. Este método permite que você faça upload do seu favicon e o selecione facilmente. Dito isto, você deve manter o plugin ativado para que o favicon continue aparecendo.<\/li>\n\n\n\n
- Editando os arquivos do tema manualmente. Recomendamos usar um tema filho se você quiser editar arquivos de tema.<\/li>\n<\/ul>\n\n\n\n
Antes de fazer upload da imagem, certifique-se de que ela tenha o tamanho e a proporção corretos do favicon do WordPress.<\/p>\n\n\n\n
Esperamos que este guia passo a passo ajude você a configurar um favicon para o seu site WordPress.<\/p>\n\n\n
\nAprenda Mais Sobre WordPress<\/h4>\n
O Que É Sidebar no WordPress?<\/a>
\nComo Remover Comentários do WordPress<\/a>
\nComo Adicionar Notificações Push no WordPress<\/a>
\nComo Colocar Vídeo no WordPress<\/a>
\n12 dicas de Segurança para WordPress<\/a>
\nComo Atualizar o WordPress<\/a>
\nO Que é Uma Página ou Post Privado WordPress?<\/a><\/p>\n <\/div>\n<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"O favicon representa seu site do WordPress em várias plataformas. Ele aparece ao lado do título do site na guia do navegador, histórico e favoritos. Apesar de seu tamanho pequeno, ele tem um papel importante em ajudar os usuários a identificar seu site. Este artigo vai explicar como adicionar um favicon do WordPress usando quatro […]<\/p>\n
- Não o atualize com muita frequência<\/strong>. Um favicon ajuda os clientes a associar a imagem à sua marca. Se você alterar o favicon com muita frequência, será difícil para eles criar essa associação.<\/li>\n\n\n\n
- Evite usar textos longos<\/strong>. O tamanho do favicon é tão pequeno que mesmo um texto curto é difícil de ler. Considere criar um design diferente para o favicon do site se o seu logotipo incluir o nome completo da sua empresa.<\/li>\n\n\n\n
- Role para baixo até as opções do geração de favicon. Na guia Path<\/strong> (Diretório), a opção padrão é colocar os arquivos de favicon no diretório raiz do seu site. Escolha a segunda opção e defina o caminho caso queira colocá-lo em outro diretório. Clique em Generate your Favicons and HTML code<\/strong> (Gerar seus Favicons e código HTML).
- Clique em Selecionar da Biblioteca de Mídia<\/strong> para fazer upload ou escolher uma imagem de favicon. Você não precisa editar sua imagem usando um software de edição porque o plugin fará isso por você. Idealmente, sua imagem deve ter pelo menos 260 x 260 pixels<\/strong> de tamanho.
- Escolha a guia Identidade do site na barra lateral esquerda e clique no botão Selecionar ícone do site.
- Passe o mouse sobre a área onde deseja colocar o logotipo e clique no botão de inserir bloco (+)<\/strong>. Embora você possa adicionar seu favicon em qualquer lugar do site, recomendamos adicioná-lo à área do cabeçalho.<\/li>\n\n\n\n
- Escolha uma cor de fundo para o favicon<\/strong>. Um plano de fundo transparente é melhor, especialmente se você tiver espaço em branco no design.<\/li>\n\n\n\n
- Melhora a visibilidade<\/strong>. Se configurado corretamente, seu favicon aparecerá nos resultados da pesquisa ao lado do URL do seu site WordPress. Isso ajuda as pessoas a notarem o seu site e aumenta o tráfego orgânico.<\/li>\n\n\n\n