Como adicionar e alterar um favicon do WordPress. Bônus de WP

As pessoas usam o WordPress para criar sites para indivíduos e empresas. Uma maneira de ajudar os visitantes recorrentes a saberem que o site é seu é ter um favicon personalizado do WordPress.

O que é um Favicon?

Um favicon é um ícone que aparece na guia ou janela do navegador e na lista de marcadores ou favoritos especificamente associados a um determinado site. Se um navegador não encontrar um favicon personalizado, ele mostrará um favicon padrão.

Um favicon do WordPress geralmente é uma versão minúscula do logotipo do site. Você pode reduzir o logotipo para o tamanho do favicon, mas geralmente é necessário criar um relacionado ao logotipo original.

Por que devo usar um Favicon?

As empresas devem ter um favicon para melhorar a familiaridade e incentivar a confiança de clientes em potencial. A marca permite que os visitantes reconheçam um site instantaneamente. Acrescenta continuidade e legitimidade.

Indivíduos também podem usar um favicon por motivos semelhantes, embora o objetivo seja visitantes repetidos em vez de compras na maioria das situações.

Especificações do Favicon

O tamanho do favicon no WordPress é 16×16 pixels. No entanto, alguns outros navegadores e aplicativos usam um tamanho maior, variando de 16 a 195 pixels quadrados.

Se você ficar com o tamanho 16×16, os aplicativos que usam tamanhos maiores geralmente o ampliarão, muitas vezes causando pixelização. Por causa disso, a identidade do site do WordPress requer 512 × 512.

Alguns tamanhos alternativos comuns são:

• 24 pixels – o ícone de um site fixado no Internet Explorer 9
• 72 pixels – o ícone na tela inicial do iPad
• 128 pixels – o ícone usado na Chrome Web Store
• 195 pixels – o ícone mostrado no Opera Speed ​​Dial

Formatos de favicon

Um favicon não será exibido corretamente se for salvo em um formato incorreto. O formato mais comum é o Windows ICO, que era o requisito original. Ele pode conter uma variedade de tamanhos e resoluções para uso em várias plataformas. É o único formato usado pelo Internet Explorer.

PNG é a opção mais amigável, já que praticamente qualquer programa gráfico salva neste formato, e fornece um tamanho de arquivo pequeno e permite que o favicon seja transparente, se desejado.

O Opera suporta o uso de SVG para favicons, embora seja o único navegador que o faz.

GIF, JPG e APNG são opções, mas são menos úteis porque sua resolução é pior e podem distrair. A distração é especialmente provável com arquivos GIF animados e arquivos APNG, que também são animados.

Criando um favicon

Projetar um favicon do WordPress para adicionar reconhecimento ao seu site é uma ótima ideia. Você pode criar um em um programa gráfico em seu computador ou usar um site gratuito online, como favicon-generator.org ou favicon.cc.

Considere os seguintes fatores para melhorar o valor do seu favicon.

Identidade

A razão mais importante para ter um favicon é ser reconhecido. Crie um design que represente o produto ou serviço que você oferece ou um design que corresponda ao logotipo da sua marca. Uma imagem diretamente relacionada à sua marca, como uma versão menor do logotipo ou a letra ou letras principais do nome da empresa, é o ideal.

Simplicidade

Por causa de seu tamanho pequeno, simples é melhor. Formas básicas ou letras são uma boa opção para visibilidade. Quando os visitantes o reconhecem de relance, é mais eficaz. Quanto mais detalhes você tentar incluir, mais difícil será para o visitante reconhecer o que é o ícone. Precisão, ousadia e clareza são essenciais.

Cores

O alto contraste melhorará a legibilidade e aumentará o reconhecimento. Considere os favicons de sites como NBC e Netflix. Seus sites são instantaneamente óbvios. Sites que têm uma identidade de cor clara devem incluir essa cor em seu favicon do WordPress. Novamente, mantenha-o simples. Muitas cores podem causar uma imagem pouco nítida.

Como adicionar um favicon ao WordPress

Adicione um favicon do WordPress usando um dos seguintes métodos:

1) Use a opção de ícone do site embutida no WordPress.

Passe o mouse sobre Aparência e escolha Personalizar, depois escolha a guia Identidade do Site. O ícone do site está na parte inferior do painel esquerdo e permite que você escolha qualquer imagem quadrada de 512 pixels ou maior, que é redimensionada conforme necessário.

Se o arquivo escolhido não for um quadrado, o WordPress fornece uma interface para cortar a imagem em um quadrado.

2) Edite o header.php

Edite o arquivo header.php em seu tema atual e adicione este código:

 <link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

Substitua “seudominio” pelo nome de domínio do seu site e certifique-se de enviar o favicon para o espaço da web.

Se você quiser impedir que o WordPress desfaça a alteração em uma atualização, crie um tema filho antes de editar e edite o arquivo do tema filho em vez do arquivo do tema principal.

3) Use um plugin do WordPress.

Use um dos plugins que listamos abaixo.

Como alterar um favicon no WordPress

Alterar o favicon do WordPress é semelhante a adicionar um. Os mesmos métodos funcionam para fazer upload de um novo favicon. Também é possível fazer upload de um novo e substituir o antigo, o que o alterará quando os visitantes limparem o cache ou fizerem uma atualização forçada.

Deixe o WP Buffs lidar com suas atualizações e alterações se você achar o processo confuso. A equipe está disponível 24 horas por dia, 7 dias por semana, para prestar serviço e assistência.

Simplifique com um plugin WordPress Favicon

Facilite o processo de adicionar ou alterar o favicon do WordPress instalando um plugin.

• Você pode usar o plugin Insert Headers and Footers para adicionar o código acima facilmente. Cole o código na seção de cabeçalho e salve-o.
• O plugin All in One Favicon adiciona a funcionalidade para facilitar o processo de adicionar um favicon.
• RealFaviconGenerator é um plugin que gera ícones com base nos requisitos do navegador.
• Outro plugin popular é o Heroic Favicon Generator, que gera um favicon a partir de uma imagem carregada ou de uma já existente na sua biblioteca de mídia. Ele usa arrastar e soltar para fazer upload de arquivos de imagem.

Por que meu Favicon do WordPress não está aparecendo?

Existem várias razões possíveis para erros de favicon, desde erro do usuário até idiossincrasias do navegador.

Cache

Quando seu site é armazenado em cache, as alterações em elementos como o favicon demoram a aparecer. Você pode acelerar o processo fazendo um hard refresh (Ctrl + F5) ou limpando o cache do navegador. Se isso não resolver o problema, verifique o tipo de arquivo favicon. Se não for um arquivo .ico, pode ser incompatível com o navegador.

Erros de digitação

Se você tiver um erro tipográfico no código, o favicon provavelmente apresentará um erro em vez de ser exibido. Erros simples, como falta de aspas, barras ou colchetes, causam erros que atrapalham a imagem e possivelmente toda a página da web. Verifique o código com atenção.

Localização do Favicon do WordPress

A referência do arquivo também é muito específica. Se o link (a parte entre aspas href) apontar para uma imagem que não existe, o favicon não será exibido. Tenha cuidado para fazer o upload do arquivo favicon e copiar o link exato. A melhor maneira de fazer isso é usar a Biblioteca de Mídia dentro do WordPress.

Visualização local

Se você estiver verificando a exibição em um computador local em vez de carregar a página da Internet, o favicon do WordPress não será exibido porque a maioria dos navegadores não procura localmente pelo favicon. Verifique a página na internet para ter certeza de que está sendo exibida para os visitantes.

Tipo de imagem errado

O tipo de arquivo padrão para a imagem favicon é .ico (“image/ico”). Quando se utiliza outro tipo de arquivo, como PNG ou SVG, este deve ser ajustado no código ao utilizar o método de edição de tema. O tipo de arquivo deve corresponder ao tipo de arquivo da imagem. Por exemplo, um arquivo PNG deve dizer “image/png” em vez de “image/ico”.

Para obter mais informações sobre todos os tipos de tópicos relacionados ao WordPress, assine a newsletter do WPBuffs.

As pessoas também perguntam