Press ESC to close

Or check our Popular Categories...
Dicas Ferramentas DEV Sem categoria PHP Lifestyle Technology
F

Favicon no WordPress

4 Min Read
0 0

Get the Favicon Image of any Website with Google S2 Converter

The images that you see next to blog comments here are not the regular gravatar pictures, instead they are favicons pulled from the website of the person who has written that comment. Same is the case with favicons that are displayed near external hyperlinks in the tech river. With these images, you can easily figure(…)

couch mode print story

  1. How to Scrape Google Search Results inside a Google Sheet
  2. A Simple Trick to Highlight the External Links on a Web Page
  3. Assign Keyboard Shortcuts to your Favorite Websites
  4. How to Add Websites as Apps in Google Chrome
  5. Make Google Better with Customize Google for Firefox

favicon-imagesThe images that you see next to blog comments here are not the regular gravatar pictures, instead they are favicons pulled from the website of the person who has written that comment.

Same is the case with favicons that are displayed near external hyperlinks in the tech river. With these images, you can easily figure out the target page without having to look at the browser’s status bar.

tech-river

Google Shared Stuff (S2) offers a secret URL that can automatically pull favicon images of any website provided you know the URL. The images are in the PNG format (not ICO) and hence will render correctly in all browsers via the <img> tag.

The syntax for favicons is google.com/s2/favicons?domain=<www.abc.com>

For instance, if the site address is labnol.org, the URL of favicon image labnol favicon will be:

http://www.google.com/s2/favicons?domain=www.labnol.org

To see all this in action, go to your Google Profile page and check the URL of favicon image that is displayed next to your website link – see example.

Now that you know the basics, try this WordPress plugin I wrote to make it easier for you to integrate favicons in your blog comments. Here’s the internal code:

if (!empty($comment->comment_author_url)) {
$url = preg_replace('/^http:\/\//', '', $comment->comment_author_url);
 if ($url != "") {
   $imgurl = "http://www.google.com/s2/favicons?domain=" . $url; 
   echo '<img src="' . $imgurl . '" width="16" height="16" />';	
  }
}

This gets slightly complex if you are on the Classic Template of old blogger since the authorURL is not directly available and you may require some JavaScript manipulation to get the URL from <$BlogCommentAuthor$>.

However in the new version of Blogger, you can get the URL of the commenter directly using the authorUrl Data Tag so the above technique can be ported to the new Blogger.

And if you have not added a favicon to your blog yet, check this guide on how to add favicons.

Thanks Nick, Simon and Jason.

http://www.labnol.org/internet/get-favicon-image-of-websites-with-google/4404/

Guia completo para criar favicon e adicionar ao WordPress

Aprenda como criar favicon, a importância desse ícone para o site e como adicioná-lo ao WordPress. Crie site grátis e coloque em prática o aprendizado!

O que é favicon?

Favicon é aquele pequeno ícone que aparece na frente do título da página na aba do navegador, lá em cima na tela. É uma imagem que representa a marca do site/empresa.

exemplo de favicons

Por que criar favicon?

Ele ajuda o usuário a identificar a página, caso haja várias abas abertas ou esteja navegando em telas pequenas, como de celular e tablet. Também fortalece a marca do site e compõe a identidade visual deste.

Melhoria na experiência do usuário é um dos benefícios!

O favicon é um detalhe que passa despercebido por muitos que criam site. Isso é um erro, pois são os pequenos cuidados que fazem a diferença.

Como criar favicon?

Essa pergunta gera outras, respondidas abaixo:

  • Tamanho do favicon: 128×128 pixels.
  • Formato de favicon: PNG ou ICO, por causa da transparência, caso a imagem não seja um quadrado (ex.: logo do WordPress é redonda).
  • Imagem para favicon: logo ou produto da empresa.

Agora sim vamos criar um favicon!

Destacamos uma maneira para isso (há outras não listadas aqui):

Gerador de favicon on-line

Uma opção é o Genfavicon, gerador de favicon direto do navegador.

Está quase pronto!

Como trocar favicon no WordPress

No painel do WordPress, verifique se a aba “Opções do tema” possibilita mudar o favicon. Uma vez encontrada essa opção, faça upload do arquivo ou insira a URL dele (você terá que adicioná-lo à biblioteca de mídia).

O plug-in All in one Favicon traz opções de upload ou URL.

Como mudar favicon no EasyPress da Site.com.br

  1. Acesse o painel administrativo do site (seuendereco.com.br/admin).
  2. Abra o “Modo avançado”, na barra superior.
  3. Adicione a imagem do favicon à biblioteca, na opção “Mídia”.
  4. Copie a URL do arquivo.
  5. Localize as “Opções do tema”, na barra lateral.
  6. Clique na aba “Logo e favicon”.
  7. Adicione a URL no campo do favicon.
  8. Salve a alteração.

Fácil, não é?

Seu favicon no WordPress está pronto. Os usuários e a identidade visual agradecem!

Coloque em prática com site WordPress grátis

É só escolher um tema WordPress grátis e editar como quiser!

Você ainda ganha uma conta de e-mail e pode usar seu domínio próprio.

 

Imagem via

https://www.site.com.br/criar-favicon-adicionar-ao-wordpress/

Categorized in:

Dicas

Deixe um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.