Neste artigo, discutiremos os benef\u00edcios da utiliza\u00e7\u00e3o de um favicon em um site WordPress. Depois explicaremos como criar um, e o acompanharemos atrav\u00e9s de tr\u00eas op\u00e7\u00f5es f\u00e1ceis para adicion\u00e1-lo ao seu site.<\/p>\n
Por fim, vamos encerrar com algumas dicas de favores e melhores pr\u00e1ticas do WordPress. Vamos come\u00e7ar!<\/p>\n
Os Benef\u00edcios da Utiliza\u00e7\u00e3o de um Favicon WordPress<\/h2>\n
Se voc\u00ea j\u00e1 teve muitas abas abertas ao mesmo tempo (culpado!), voc\u00ea provavelmente pode apreciar a utilidade de um favicon. Um favicon torna f\u00e1cil para os usu\u00e1rios identificarem rapidamente o seu site quando t\u00eam m\u00faltiplas abas abertas em seu navegador:<\/p>\n Dependendo do n\u00famero de abas abertas, o t\u00edtulo do seu site pode nem sempre estar vis\u00edvel. Portanto, adicionar um favicon pode ajudar a\u00a0melhorar o UX para seus visitantes<\/a>.<\/p>\n Al\u00e9m de impulsionar o reconhecimento da marca, o uso de um favicon do WordPress tamb\u00e9m pode fazer seu site parecer mais profissional e confi\u00e1vel. Isso, por sua vez, pode ajudar a aumentar a confian\u00e7a dos clientes.<\/p>\n Al\u00e9m disso, se algu\u00e9m salvar seu site na tela inicial do seu dispositivo m\u00f3vel, seu favicon aparecer\u00e1 como o \u00edcone. Usar o logotipo da sua marca ou imagens semelhantes pode ajudar a tornar o seu site mais f\u00e1cil de reconhecer, e ajudar na cria\u00e7\u00e3o de uma est\u00e9tica coesa.<\/p>\n\n Se voc\u00ea j\u00e1 tem um favicon voc\u00ea est\u00e1 pronto para usar (a maioria das empresas usa seu logotipo ou uma variante dele), sinta-se \u00e0 vontade para pular para a pr\u00f3xima se\u00e7\u00e3o. Caso contr\u00e1rio, vamos ver como criar sua foto de favicon.<\/p>\n No passado, voc\u00ea tinha que usar um arquivo ICO espec\u00edfico para o seu favicon. No entanto, hoje em dia, todos os navegadores modernos suportam o uso de arquivos ICO, PNG, e GIF para o seu favicon. JPEG tamb\u00e9m \u00e9 amplamente suportado (leia-se: JPG vs JPEG<\/a>), mas n\u00e3o em todas as vers\u00f5es do Internet Explorer, o que o torna menos ideal para uso em favicon.<\/p>\n Se voc\u00ea est\u00e1 familiarizado com o Photoshop, voc\u00ea pode us\u00e1-lo para criar um favicon manualmente. No entanto, muitas vezes \u00e9 mais f\u00e1cil usar uma ferramenta b\u00e1sica baseada em nuvem para criar seu conjunto de \u00edcones de favicon a partir de uma imagem existente.<\/p>\n O RealFaviconGenerator<\/a> (a vers\u00e3o baseada em nuvem do plugin que discutiremos mais tarde) \u00e9 uma \u00f3tima op\u00e7\u00e3o porque:<\/p>\n Outros geradores de favores \u00fateis s\u00e3o:<\/p>\n Para usar o RealFaviconGenerator, comece carregando a imagem que voc\u00ea deseja usar clicando em Selecione sua imagem Favicon<\/strong>:<\/p>\n Na tela seguinte, voc\u00ea pode configurar detalhes espec\u00edficos sobre o seu conjunto de favicon (se desejar). Quando terminar, v\u00e1 at\u00e9 o fundo e clique em Gerar seus Favicons e c\u00f3digo HTML<\/strong>:<\/p>\n Na p\u00e1gina seguinte, clique no pacote Favicon<\/strong> para fazer o download das imagens do seu favicon:<\/p>\n Certifique-se de deixar esta p\u00e1gina aberta se voc\u00ea planeja adicionar manualmente o favicon ao seu site.<\/p>\n Existem algumas dicas de design e formata\u00e7\u00e3o que vale a pena mencionar e revisar antes de criar o seu favicon. O mais importante, o tamanho recomendado para favicons \u00e9 de 512\u00d7512 pixels.<\/p>\n Embora o seu favicon do WordPress seja um quadrado perfeito, voc\u00ea tamb\u00e9m pode usar uma imagem retangular e cort\u00e1-lo antes ou depois de\u00a0carreg\u00e1-lo para o WordPress<\/a>. O WordPress vem com uma funcionalidade de recorte integrada<\/a>\u00a0para \u00edcones do site se voc\u00ea adicion\u00e1-los atrav\u00e9s do Customizer (que n\u00f3s vamos acompanhar voc\u00ea em breve).<\/p>\n Al\u00e9m disso, \u00e9 importante notar que o seu favicon aparecer\u00e1 como um quadrado de 16\u00d716 px. Por isso, voc\u00ea quer escolher uma imagem que fique bem assim que ela for reduzida a essas dimens\u00f5es. Embora ela aparecer\u00e1 nesse tamanho, ainda deve ter uma altura e largura de pelo menos 512 px.<\/p>\n Finalmente, \u00e9 uma id\u00e9ia inteligente rever algumas das\u00a0Diretrizes do Google<\/a>\u00a0para a cria\u00e7\u00e3o e utiliza\u00e7\u00e3o de favicons. Isso ajudar\u00e1 a garantir que seu \u00edcone seja exibido de forma otimizada nos mecanismos de busca<\/a> e abas do navegador.<\/p>\n Uma vez que voc\u00ea tenha seu favicon, voc\u00ea est\u00e1 pronto para adicion\u00e1-lo ao seu site WordPress. Vamos dar uma olhada em tr\u00eas m\u00e9todos que voc\u00ea pode usar para fazer isso.<\/p>\n A partir do WordPress 4.3, todos os sites WordPress incluem um \u00edcone de site que facilita o upload e o corte de uma imagem para usar como um favicon. Para a maioria dos usu\u00e1rios, este \u00e9 o m\u00e9todo mais simples e r\u00e1pido para adicionar um \u00edcone de favicon ao WordPress.<\/p>\n Tudo que voc\u00ea vai precisar \u00e9 de uma imagem de pelo menos 512\u00d7512 pixels. O WordPress ir\u00e1 lidar com o resto do processo. Para come\u00e7ar, acesse Appearance \u2192 Personalize<\/strong> em seu painel do WordPress:<\/p>\n A partir da\u00ed, navegue at\u00e9 a aba Identidade do Site<\/strong>:<\/p>\n A seguir, olhe na parte inferior da se\u00e7\u00e3o \u00cdcone do site<\/strong> e clique no bot\u00e3o Selecionar \u00edcone do site<\/strong>:<\/p>\n A interface normal da\u00a0WordPress Media Library<\/a> ser\u00e1 aberta. Voc\u00ea pode escolher uma imagem existente na sua Biblioteca de M\u00eddia ou fazer o upload de uma nova imagem. Se voc\u00ea usou o RealFaviconGenerator para criar seu favicon, certifique-se de que o pacote que voc\u00ea baixou est\u00e1 descompactado.<\/p>\n Uma vez que voc\u00ea tenha uma imagem que voc\u00ea gosta, clique sobre ela e escolha Select<\/strong> no canto inferior direito:<\/p>\n Se sua imagem ainda n\u00e3o \u00e9 um quadrado perfeito (por exemplo, 512\u00d7512 px), o WordPress lhe dar\u00e1 a chance de cort\u00e1-la na pr\u00f3xima tela.<\/p>\n Use a caixa para destacar a parte da imagem que voc\u00ea deseja usar para o seu \u00edcone. Voc\u00ea pode ver uma pr\u00e9via de como sua imagem recortada ficar\u00e1 no lado direito da interface.<\/p>\n Quando estiver satisfeito com a apar\u00eancia das coisas, clique em Crop Image<\/strong> para finalizar a sua escolha:<\/p>\n \u00c9 isso a\u00ed! Tudo o que voc\u00ea precisa fazer \u00e9 selecionar Save & Publish<\/strong> para fazer o seu favicon vivo. Se voc\u00ea quiser mudar seu favicon no futuro, voc\u00ea pode voltar para esta interface.<\/p>\n Se voc\u00ea preferir uma solu\u00e7\u00e3o de plugin ao inv\u00e9s da funcionalidade de \u00edcones nativos do site WordPress, voc\u00ea pode usar um plugin gratuito popular chamado\u00a0Favicon by RealFaviconGenerator<\/a> (a ferramenta baseada na nuvem que discutimos anteriormente).<\/p>\n Este plugin \u00e9 t\u00e3o simples de usar quanto o WordPress Customizer nativo. Entretanto, ele oferece op\u00e7\u00f5es adicionais de compatibilidade para v\u00e1rios dispositivos e \u00edcones de aplicativos. Para utiliz\u00e1-lo, instale e ative o plugin gratuito <\/a>atrav\u00e9s do seu\u00a0painel do WordPress<\/a>:<\/p>\n Uma vez ativado o plugin, v\u00e1 para Appearance \u2192 Favicon<\/strong> para criar o seu conjunto de favicon. Tudo o que voc\u00ea precisa fazer \u00e9 selecionar ou carregar uma imagem que seja no m\u00ednimo 70\u00d770 px (idealmente 260\u00d7260 px):<\/p>\n Depois de selecionar sua imagem, clique em Gerar favicon<\/strong>. Quando voc\u00ea selecionar esse bot\u00e3o, o plugin o levar\u00e1 para fora do seu site WordPress para o site RealFaviconGenerator.<\/p>\n Na parte inferior do site, role para baixo para selecionar Gerar seus Favicons e c\u00f3digo HTML<\/strong> (veja a se\u00e7\u00e3o anterior). Enquanto a ferramenta funciona, o Real Favicon Generator ir\u00e1 envi\u00e1-lo de volta ao seu painel do WordPress:<\/p>\n Depois disso, o seu favicon estar\u00e1 pronto e pronto para ir. Voc\u00ea pode ver previews de como ele ser\u00e1 em diferentes dispositivos na interface do plugin.<\/p>\n Se voc\u00ea preferir fazer as coisas manualmente, \u00e9 poss\u00edvel adicionar um favicon ao seu\u00a0site WordPress via File Transfer Protocol (FTP)<\/a> ou File Manager se o seu host utiliza o\u00a0cPanel<\/a>.<\/p>\n Se voc\u00ea optar por este m\u00e9todo, voc\u00ea tamb\u00e9m precisar\u00e1 criar sua pr\u00f3pria imagem de favo. Voc\u00ea pode fazer isso seguindo os passos descritos anteriormente neste post.<\/p>\n Para esta demonstra\u00e7\u00e3o estaremos usando o pacote que criamos e baixado do RealFaviconGenerator, as instru\u00e7\u00f5es se aplicam mesmo que voc\u00ea tenha usado uma ferramenta diferente para criar seu favicon.<\/p>\n Para adicionar manualmente um favicon do WordPress ao seu site, voc\u00ea precisar\u00e1 faz\u00ea-lo:<\/p>\n Os arquivos devem estar na mesma pasta que suas pastas wp-admin<\/i> e wp-content<\/i>. Em seguida, pegue o c\u00f3digo RealFaviconGenerator fornecido anteriormente, e qualquer um dos dois:<\/p>\n O uso do plugin Insert Headers e Footers \u00e9 \u00f3timo porque garante que voc\u00ea n\u00e3o perder\u00e1 seu favorito se voc\u00ea\u00a0mudar os temas do WordPress<\/a>\u00a0pelo caminho.<\/p>\n Para fazer isso, instale e ative os cabe\u00e7alhos e rodap\u00e9s de inser\u00e7\u00e3o. Ent\u00e3o v\u00e1 em Configura\u00e7\u00f5es \u2192 Inserir Cabe\u00e7alhos e Rodap\u00e9s<\/strong>, e cole seu c\u00f3digo na se\u00e7\u00e3o Scripts no Cabe\u00e7alho<\/strong>:<\/p>\n Certifique-se de salvar suas altera\u00e7\u00f5es. Ent\u00e3o voc\u00ea est\u00e1 acabado!<\/p>\n Se voc\u00ea quer que cada site da sua\u00a0rede multisite <\/a>tenha um favicon \u00fanico, a maneira mais f\u00e1cil de conseguir isso \u00e9 usar um plugin de favicon como o apresentado acima. Embora seja poss\u00edvel editar os arquivos do seu tema para habilitar favicons \u00fanicos para cada site da rede, o processo \u00e9 significativamente mais complicado do que usar um plugin.<\/p>\n Voc\u00ea tamb\u00e9m pode considerar o uso de uma Rede de Entrega de Conte\u00fado (CDN)<\/a> para atender \u00e0s suas imagens favoritas. Os tr\u00eas m\u00e9todos que discutimos neste post armazenam todas as imagens do seu favicon no seu servidor. Entretanto, voc\u00ea pode otimizar seu site ainda mais usando uma CDN para servir essas imagens.<\/p>\n Quando voc\u00ea\u00a0instala o Cloudflare<\/a> ou um servi\u00e7o como o KeyCDN<\/a>, os navegadores dos visitantes ir\u00e3o carregar seu favicon a partir do seu CDN ao inv\u00e9s do servidor do seu site. Se voc\u00ea estiver usando um plugin como o\u00a0CDN Enabler<\/a>, ele deve reescrever automaticamente a URL do seu favicon do WordPress para trabalhar com os m\u00e9todos acima.<\/p>\n\n Um favicon WordPress pode ajudar a aumentar o reconhecimento da sua marca e melhorar o UX para os visitantes do seu site. Felizmente, voc\u00ea tem v\u00e1rias op\u00e7\u00f5es para escolher, o que torna simples a adi\u00e7\u00e3o de uma.<\/p>\n Os tr\u00eas principais m\u00e9todos que voc\u00ea pode usar para adicionar um favicon do WordPress ao seu site s\u00e3o:<\/p>\n Os favicons s\u00e3o mais conhecidos como os pequenos \u00edcones que aparecem ao lado dos nomes dos sites nas abas do navegador. No entanto, embora seja l\u00e1 …<\/p>\n","protected":false},"author":103,"featured_media":37339,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[176,195],"topic":[1026,1037],"class_list":["post-37324","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpresshelp","tag-wptips","topic-desenvolvimento-wordpress","topic-dicas-wordpress"],"yoast_head":"\n![\"O](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/favicon-kinsta-navegador-chrome.png\")
<\/a>Como Criar um Favicon WordPress<\/h2>\n
\n
\n
![\"Carregando](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/carregando-imagem-fonte-favicon-real-favicon-generator.jpg\")
![\"A](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/opcoes-gerador-favicon-realfavicongenerator.jpg\")
![\"A](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/tela-download-pacote-favicon.jpg\")
Dicas para criar um Favicon WordPress<\/h3>\n
Como adicionar um Favicon WordPress ao seu site (3 op\u00e7\u00f5es f\u00e1ceis)<\/h2>\n
1. Usando o Personalizador WordPress para fazer o upload do seu Favicon<\/h3>\n
![\"O](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/menu-apariencia-wordpress.jpg\")
![\"A](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/opcao-identidade-site-wordpress-customizer.jpg\")
![\"O](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/botao-select-site-icon-customizer-wordpress.jpg\"){kind=icon}
![\"Selecionando](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/selecionando-imagem-favortita-wordpress.jpg\")
![\"Cortando](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/cortando-imagem-favorita-wordpress.png\")
2. Instalando um Plugin para Adicionar seu Favicon WordPress<\/h3>\n
![\"O](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/plugin-favicon-realfavicongenerator-wp.jpg\")
![\"A](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/tela-adicionar-favicon-wordpress-usando-plugin.jpg\")
![\"A](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/tela-previsualizar-favicon-wordpress-aparecer.png\")
3. Adicionando manualmente o seu Favicon via FTP<\/h3>\n
\n
\n
![\"Adicionando](\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/adicionando-codigo-favicon-utilizando-plugin-headers.jpg\")
Dicas adicionais para o uso de WordPress Favicons<\/h2>\n
Resumo<\/h2>\n
\n