Como adicionar um favicon do WordPress ao seu site? (3 Métodos)

O que é WordPress Favicon?

WordPress Favicons são pequenos ícones geralmente de tamanho 16×16 pixels que representam sua marca e estão localizados perto de sua página que você pode ver facilmente na guia do seu navegador.

Anteriormente, quando o Google Analytics não existia, os favicons eram usados ​​como uma ferramenta para determinar o tráfego da web. Mas agora, é bem conhecido por aprimorar o UX e o reconhecimento da marca.

Além disso, ter um WordPress Favicon ajuda no reconhecimento da marca. Uma vez que pode ser facilmente visível nas guias do navegador, favoritos, arquivos de histórico e assim por diante. Eles também podem ser usados ​​como atalho de um site em pequenos dispositivos, como smartphones ou abas. Ajuda a economizar o tempo dos usuários e permite que eles identifiquem facilmente o site para navegar sem qualquer dificuldade.

Por que as vantagens de usar o WordPress Favicon?

Além do reconhecimento da marca e melhoria da experiência do usuário, que já discutimos, a vantagem de usar o WordPress Favicon é garantir ao visitante que ele está navegando no site certo e na página certa.

Suponha que você tenha aberto muitas abas em seu navegador, conforme o número de abas aumenta, ele irá ocultar o título do seu site conforme mostrado abaixo:

Neste ponto, o Favicon ajuda você a identificar seu site rapidamente para que você possa alterná-lo facilmente. Inclusive, você pode pedir aos seus visitantes que adicionem o atalho do site na tela inicial do navegador ou em pequenos dispositivos, como smartphones, para acesso fácil e rápido ao seu site.

Afinal, um dos principais objetivos de todo site é fornecer uma experiência única ao usuário para que os visitantes possam facilmente visitar o site novamente. É isso que o WordPress Favicon ajuda no seu site WordPress, ajudando a estabelecer um forte reconhecimento da marca e aprimorando a experiência do usuário para o próximo nível.

Agora vamos ver, como você pode criar um belo WordPress Favicon para o seu site.

Como criar WordPress Favicon?

Para criar o WordPress Favicon, a primeira coisa que você precisa fazer é decidir o tamanho do WordPress Favicon e para quais dispositivos ele deve suportar. No entanto, há uma lista completa das diferentes resoluções de Favicons disponíveis que suportam vários navegadores e plataformas.

Mas neste post, usaremos a resolução mais recomendada e amplamente aceita, para que seja fácil para você criar um WordPress Favicon para o seu site facilmente, sem qualquer confusão.

Algumas melhores dicas para criar WordPress Favicons

• A resolução mais recomendada para Favicon é 512×512 pixels.
• Escolha uma imagem que deve ficar ótima, mesmo que seja reduzida para uma resolução de 16×16 pixels.
• Sempre siga as Diretrizes fornecidas pelo Google para se qualificar para um favicon ao lado de seus resultados de pesquisa.
• Você pode escolher imagens retangulares ou quadradas, pois terá a opção de personalizá-las após ou antes de carregá-las no WordPress.

Existem muitas maneiras pelas quais você pode criar o WordPress Favicon. Você pode contratar um designer que possa entender melhor sua marca e criar um favicon com aparência profissional. Você pode usar o WordPress Favicon Plugin para criar Favicon. Você pode até criar por conta própria se souber usar o Adobe Photoshop.

Além dele, também estão disponíveis várias ferramentas online, como o gerador de Favicon e o Favicon.cc, com a ajuda das quais você pode criar facilmente o Favicon.

Suponha que você crie um favicon para seu site, xyz.com. Você não sabe usar o adobe photoshop e nem tem orçamento suficiente para contratar um designer profissional. Nesse caso, você usará o gerador de Favicon.

primeiro, você precisa visitar o site e fazer o upload da imagem que deseja converter no favicon do seu site, conforme mostrado na imagem abaixo:

Escolha as configurações apropriadas, como

• Gere ícones para aplicativos da Web, Android, Microsoft e iOS
• Gere ícones apenas para WordPress 16×16 Favicon.ico

Marque as caixas e clique no botão criar favicon. A página da Web será recarregada em uma página de download de onde você pode baixar facilmente seu arquivo zip Favicon, conforme mostrado abaixo:

No entanto, você também pode adicionar o Favicon ao seu site manualmente copiando o código conforme mostrado acima e colando-o no cabeçalho do seu documento HTML.

Se você não escolheu nenhuma ferramenta para desenhar seu favicon e optou por desenhar por conta própria, há alguns pontos que você deve ter em mente antes de começar a desenhar.

• Mantenha o design simples e limpo, pois será encolhido que outros, os detalhes podem se perder.
• O design do seu favicon deve ser da mesma cor, gráficos ou fontes do logotipo principal do seu site ou deve representar sua marca.
• Projete seu Favicon em uma resolução maior primeiro e, em seguida, redimensione-o de acordo com suas necessidades.

Depois de terminar de projetar seu Favicon, você precisa salvar o arquivo no formato de arquivo suportado. Anteriormente, havia um tipo de arquivo WordPress Favicon específico “WordPress Favicon.ico” amplamente utilizado. Mas agora as coisas mudaram e hoje em dia todos os navegadores modernos agora suportam os formatos de arquivo PNG, GIF e ICO.

No entanto, os formatos de arquivo JPEG também estão disponíveis e são amplamente utilizados para salvar arquivos Favicon. Mas existem algumas versões mais antigas do Internet Explorer que não as suportam. Portanto, é melhor se ater apenas àqueles que têm suporte universal.

Como fazer upload do WordPress Favicon no seu site?

Depois de projetar e salvar seu Favicon com sucesso, é hora de fazer o upload ou adicionar o Favicon ao seu site WordPress. Existem três maneiras pelas quais você pode fazer isso,

1. Através do personalizador do WordPress
2. Usando um plugin para adicionar Favicon
3. Adicionando favicon manualmente

Adicionando Favicon usando o WordPress Customizer

Após o lançamento da versão WordPress 4.3, foi introduzida uma nova opção através da qual se torna uma maneira fácil e rápida de fazer upload e recortar imagens para usar como Favicon.

A única coisa que você precisa fazer é enviar uma imagem clara de alta qualidade, de preferência com resolução de 512X512. Antes de tudo, faça login no seu painel do WordPress > Aparência > personalize , conforme mostrado abaixo:

A página será carregada para personalizar a página onde você precisa clicar na guia Identidade do site, conforme mostrado abaixo:

Depois de clicar na guia Identidade do site, você precisa procurar o botão "Selecionar ícone do site", conforme mostrado.

Depois disso, uma interface do WordPress Media será exibida de onde você poderá fazer upload de imagens ou usar as imagens existentes da biblioteca de mídia para criar seu Favicon. Agora clique no botão "Selecionar" localizado no canto inferior direito.

Depois disso, você pode recortar ou redimensionar a imagem selecionada para torná-la perfeita para o seu Favicon, prossiga clicando no botão Recortar imagem para finalizá-la.

Depois de concluir todas as etapas acima, é hora de salvar todas as alterações e clicar no botão publicar para torná-lo ativo. No entanto, a qualquer momento, se você não estiver satisfeito com seu Favicon, precisará repetir as etapas acima para a alteração do Favicon do WordPress.

Usando um plugin WordPress Favicon para adicionar o Favicon ao seu site

Se você estiver procurando por mais opções além do recurso padrão do ícone do site WordPress, poderá obter a ajuda dos plugins WordPress Favicon. Existem vários plug-ins Favicon gratuitos e populares disponíveis que têm a mesma funcionalidade fácil, mas oferecem muito mais opções de compatibilidade e uma experiência mais personalizada.

Um dos plugins WordPress Favicon mais populares e amplamente usados ​​que você pode usar é o Favicon da RealFaviconGenerator.

Este plugin levou a compatibilidade muito a sério para que você possa configurar o Favicon responsivo que seja compatível com a maioria dos navegadores populares.

Para começar, primeiro, você precisa instalar o plugin ReavFaviconGenerator através do painel do WordPress > Plugins > adicionar Novo .

Seguido clicando no botão Instalar e ativá-lo. Agora vá para Appearance > Favicon e selecione uma imagem que deve ter pelo menos 70×70 da biblioteca de mídia e clique no botão Generate Favicon como mostrado abaixo:

No momento em que você clicar em Gerar favicon, você será redirecionado para o site do plugin onde você precisa rolar para baixo e clicar no botão “ Gerar seus Favicons e código HTML ”.

Enquanto a ferramenta funciona em segundo plano, ela o redirecionará de volta ao painel do WordPress. Agora seu favicon está pronto.

Adicionando o WordPress Favicon manualmente

Se você não sabe como acessar o diretório raiz, é altamente recomendável que você siga os dois métodos fáceis acima. Mas se você ainda preferir usar o método manual, será necessário fazê-lo por meio de um cliente FTP ou cPanel fornecido pelo seu provedor de hospedagem na Web .

Passo 1: Mas antes disso, você precisa acessar o site do Realfavicongenrator. Clique no botão ' Selecione sua imagem Favicon ” para gerar seu Favicon.

Depois de fazer o upload da imagem, você notará a mesma interface de usuário, como ao usar o plug-in RealFaviconGenerator. Personalize ou faça alterações se desejar e role a página da web e clique no botão “ Gerar seus Favicons e código HTML ” conforme mostrado abaixo:

Passo 2: Ao clicar no botão Gerar seus Favicons e código HTML , a página passará para a próxima página de onde você pode baixar o Pacote Favicon .

Extraia o pacote Favicon baixado e carregue-o no diretório raiz do seu site por meio de um cliente FTP ou cPanel fornecido pelo seu cliente de hospedagem.

Na WPOven , tentamos entregar uma experiência única aos nossos usuários e sua conveniência é nossa maior prioridade. Por isso, fornecemos um Novo Gerenciador de Arquivos para gerenciar facilmente os arquivos e pastas do seu site.

Apresentamos nossa nova Ferramenta de Site, o Gerenciador de Arquivos.

Usando o Gerenciador de Arquivos do WPOven, ficará mais fácil para você gerenciar os Arquivos e Pastas do seu site. Você pode executar as várias tarefas a seguir facilmente.

• Instale plugins e temas do WordPress
• Criar, editar, excluir, renomear, mover e adicionar arquivos e pastas
• Crie arquivos com zip ou descompacte e descompacte arquivos
• Classificar arquivos
• Pesquisar arquivos e pastas
• Fazer upload de arquivos

Para acessar os arquivos e pastas do seu site por meio da ferramenta Gerenciador de Arquivos, primeiro você precisa fazer login no painel do WPOven. Em seguida, selecione o Site em que deseja trabalhar.

Em seguida, selecione o submenu “ Ferramentas ” e clique no botão “ Iniciar Gerenciador de Arquivos ”.

Agora você poderá ver os arquivos e pastas do seu site no Gerenciador de Arquivos

Clique no botão “Adicionar arquivos” e selecione os arquivos extraídos para upload.

Mas você deve estar ciente de que o arquivo que você vai colocar deve estar na pasta raiz ou não funcionará.

Etapa 3: Para finalizar todo o processo e fazer as coisas funcionarem corretamente, a última etapa que você precisa fazer é adicionar o trecho de código gerado pelo RealFaviconGenerator à seção principal do seu tema WordPress.

Para adicionar o seguinte trecho de código à seção de cabeçalho, você precisa instalar e ativar o plug-in de cabeçalhos e rodapés. Em seguida, navegue até Configurações > Inserir cabeçalhos e rodapés e cole o trecho de código na seção de cabeçalho conforme mostrado na imagem abaixo e clique em salvar.

Depois de concluir todas as etapas, seu favicon deve começar a aparecer.

E se o WordPress Favicon não for exibido?

Se o seu WordPress Favicon não estiver aparecendo, mesmo que você tenha seguido todas as etapas mencionadas acima, isso pode ser devido aos seguintes motivos:

1. Usou um tipo de arquivo errado do WordPress Favicon – PNG, GIF e JPEG são alguns dos formatos de arquivo de imagem que agora são suportados pelos navegadores modernos para Favicon. Mas eles não são suportados por navegadores antigos. Além disso, até a maioria dos navegadores da Web prefere o uso do formato de arquivo WordPress Favicon.ico, por isso é melhor optar. Formatos Ico para evitar problemas de compatibilidade.
2. Não é possível configurar o tamanho do favicon apropriado – Outro motivo para não mostrar o Favicon no seu site pode ser a incompatibilidade do tamanho da imagem do favicon com o tamanho da tela do dispositivo. Isso pode ser eliminado usando o tipo de arquivo favicon.ico, que armazena várias versões de uma imagem em diferentes tamanhos e resoluções. Assim, o favicon pode ser facilmente visível em qualquer tamanho de tela.
3. WordPress Favicon Plugin incompatível com o tema – Também é possível que, se você estiver usando um plugin gerador de WordPress Favicon, ele esteja mostrando problemas de incompatibilidade com o tema atual que você está usando. Portanto, é melhor verificar as atualizações do plugin e a compatibilidade com o seu tema atual e a versão do WordPress.

Resumo

Agora, você se deparou como o WordPress Favicon pode ajudar no reconhecimento da marca e melhorar a experiência do usuário. E a melhor parte é que qualquer pessoa pode facilmente criar e implementar Favicons em seu site seguindo todas as diretrizes e estes passos simples:

1. Você pode criar Favicons facilmente com muitas opções disponíveis, como usar ferramentas de geração de Favicon online, plugins e com a ajuda de profissionais.
2. Você também pode adicioná-los facilmente ao seu site através da opção de personalização do WordPress, usar um plug-in ou fazê-lo manualmente.

Por fim, se você tiver algo mais valioso a acrescentar que deixamos de mencionar neste post, informe-nos na seção de comentários abaixo:

perguntas frequentes