Como adicionar um favicon ao seu site WordPress

Favicon, ou ícone favorito, é uma pequena imagem ao lado do título de uma página em uma guia do navegador. Este ícone de site desempenha um papel essencial no estabelecimento da identidade do seu site.

Se você possui um site profissional, considere o uso de favicons, caso ainda não o tenha. Aqui, discutiremos a importância disso e as coisas a serem consideradas ao preparar um. Também mostraremos três métodos de como adicionar um favicon ao seu site WordPress.

Por que você deve usar um favicon?

Para demonstrar a importância dos favicons, dê uma olhada na imagem abaixo.

Como você pode ver, cada guia possui ícones diferentes que diferenciam as páginas da web que você está visitando. Quando você tem várias guias em seu navegador, os favicons ajudam a identificar essas páginas. Como resultado, ele cria uma melhor experiência do usuário.

Um favicon não é útil apenas nas guias do navegador. Quando os usuários adicionam um atalho de página à tela inicial ou desktop do celular, o favicon será exibido na tela. Além disso, os favicons podem funcionar de forma semelhante a um logotipo. Quando as pessoas virem, reconhecerão instantaneamente seu site e sua marca.

Preparando Seu Favicon

A maneira mais rápida e fácil de criar um favicon é usar geradores de favicon. Não é necessário ter nenhum conhecimento técnico, pois a maioria deles fornece imagens prontas para usar que você só precisa ajustar um pouco.

Considere usar o logotipo de sua marca também, mas certifique-se de que ele possa ser cortado em um ícone quadrado. Ele também deve parecer simples o suficiente para que você possa vê-lo claramente, apesar de seu tamanho pequeno. Use programas de edição de imagem como Photoshop, DesignWizard ou GIMP para modificar e redimensionar seu logotipo.

Para o formato da imagem, é recomendável usar um arquivo ICO porque a maioria dos navegadores o suporta. No entanto, nem todo software de edição de fotos permite a criação de arquivos ICO. Portanto, é melhor usar geradores de favicon online que oferecem essa opção. Ou salve sua imagem como PNG e use um conversor ICO online. Normalmente, o tamanho deve ser de 16 x 16 pixels.

Se você usa o recurso Ícone do Site do WordPress 4.3, não precisa se preocupar em converter sua imagem de antemão. Agora você pode fazer upload de qualquer arquivo de imagem como seu favicon . Independentemente disso, sempre certifique-se de que ele pode ser visualizado em qualquer navegador após carregá-lo.

3 maneiras de adicionar um favicon ao seu site WordPress

Existem três métodos nos quais você pode adicionar um favicon ao seu site, escolhendo a opção de sua preferência.

Opção 1: WordPress Customizer

Para usuários do WordPress 4.3, usar o recurso Ícone do site é a maneira mais conveniente e recomendada de adicionar seu favicon.

Prepare uma imagem quadrada com pelo menos 512 pixels de altura e largura. O arquivo não deve exceder 128 MB. Se você tiver uma imagem retangular, eles permitirão que você a recorte enquanto carrega seu favicon .

Assim que sua imagem estiver pronta, siga estas etapas:

1. Abra o painel do WordPress, vá para Aparência e selecione Personalizar.

2. Procure uma guia que contém o ícone do site. A maioria dos temas teria isso na identidade do site, mas alguns renomearam a guia para título do site, nome da marca, logotipo e cabeçalho do site, etc.

3. Selecione o ícone do site e escolha uma imagem da sua biblioteca de mídia ou carregue um novo arquivo.

4. Você será direcionado ao editor Crop Image. Ajuste a posição e as proporções como desejar.

5. Parabéns! Você deve ter um novo favicon. Se ainda não apareceu, o WordPress recomenda limpar o cache e reiniciar o navegador.

Opção 2: usando plug-ins

Se você não atualizou seu WordPress, pode usar plug-ins para adicionar um favicon .

Alguns plug-ins fornecem mais controle sobre a aparência do seu favicon em dispositivos que não sejam de desktop. Por exemplo, o Favicon da RealFaviconGenerator oferece a opção de personalizar a aparência do seu ícone em diferentes sistemas operacionais.

Para usar o plug-in, siga estas etapas:

1. Vá para Plug-ins e clique em Adicionar novo no painel do WordPress.
2. Pesquise Favicon por RealFaviconGenerator e instale e ative o plugin.
3. Selecione Aparência e clique em Favicon no painel. Faça upload de uma imagem quadrada com mais de 70 x 70 pixels. Idealmente, a imagem deve ter 260 x 260 pixels ou mais.
4. Você será redirecionado para uma página onde pode definir a aparência do seu favicon no iOS, Android Chrome, Windows e Safari. Em seguida, clique em Gerar seus Favoritos e código HTML.

Além desse plugin, você pode usar All in One Favicon. O plugin permite que você defina favicons diferentes para o back-end e o front-end. Dessa forma, você não ficará confuso quando seu site e painel estiverem abertos.

Opção 3: Instalação manual via cliente FTP

Outro método é enviar seu favicon manualmente para o seu site WordPress. Para isso, você precisa conectar seu site a um cliente FTP como o FileZilla. Seu ícone pode estar no formato ICO ou PNG e deve ser nomeado como favicon.

Também é altamente recomendável que você crie um tema filho para usar este método. Dessa forma, suas alterações de código não serão removidas quando houver uma nova atualização de tema.

Quando seu site estiver conectado, siga estas etapas:

1. Carregue seu arquivo favicon para a pasta de tema atual por meio de seu cliente FTP. Se você estiver usando um tema filho, carregue-o nessa pasta.
2. Adicione o mesmo arquivo ao seu diretório raiz. Ele deve estar na mesma pasta que seu wp-content e wp-admin. Isso é para garantir que seus favicons possam ser visualizados em leitores de feed.
3. No painel do WordPress, vá para Aparência e clique em Editor de temas.
4. Agora, selecione o arquivo Theme Header e adicione este código abaixo dentro da tag se você tiver um arquivo ICO:

<link rel = ”ícone de atalho” href = ”<? php echo get_stylesheet_directory_uri (); ?> / favicon.ico ”/>

Substitua a parte após href = até /favicon.ico pelo caminho para o diretório raiz. Ficaria assim:

<link rel = ”ícone de atalho” href = ”<http://www.yourdomainname.com/favicon.ico” />

Se você tiver um arquivo PNG, simplesmente substitua o formato do arquivo. Em seguida, atualize o arquivo.

5. Atualize seu site. Se funcionar, você deve ter um novo favicon agora.

Para todos os métodos, não se esqueça de verificar a aparência do seu favicon em dispositivos móveis. Abra seu site no navegador do celular e adicione o site à tela inicial.

Embora sejam pequenos, os favicons podem aumentar o reconhecimento da marca e criar uma melhor experiência do usuário. Você pode usar geradores de favicon online ou qualquer software de edição de imagem de sua escolha para criar seu próprio favicon. Se você já tiver um, basta adicioná-lo ao seu site WordPress usando qualquer um dos três métodos acima. Boa sorte!

Leia mais Plug-ins e temas populares para sites LMS do WordPress