Olá pessoal neste post nos vamos tratar de uma coisa muito importante, “Favicons” vamos saber “O que é” e “Como colocar no seu site o blog”.

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador.

favicons Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Como transformar meu arquivo em .ico?

Nesses links abaixo são alguns sites que transformam suas imagens em extensão .ico para vocês.

http://www.favicon.cc/

http://www.html-kit.com/favicon/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.co.uk/

E agora como colocar o favicon no meu Site ou Blog ?

Agora que já possui o favicon é necessário fazer o upload da imagem para a pasta principal  “pasta raiz” do seu site ou blog e colocar o código dentro da TAG “head” abaixo eu vou dar um exemplo como fazer.

<head>
 <link rel="shortcut icon" href="http://www.meusite.com.com/favicon.ico"/>
</head>

Espero que vocês tenham gostado do post… até mais…

César Ribeiro
Written by

Hi, my name’s Cesar H. Ribeiro, I’m Brazilian and I live in São Paulo country town. I’ve been working with Web Development since 2006, I’m Web Developer Freelancer, my main specialty is deploying custom Web Sites using the WordPress platform with base, transforming PSD/Layouts for Custom Themes. In feel years with Developer Freelancer, I worked with many agencies around the world like: Brazil, Australia, USA, Germany and Austria.

Related Posts

  • Cristian

    Boa tarde.
    Gostei muito deste post explicando esse pequeno detalhe que é muito legal.
    Minha dúvida é a seguinte:
    Para eu conseguir adicionar esse favicon e vê-lo funcionando, é preciso que o meu site esteja publicado na internet ou eu posso fazer isso local e se posso fazer local, como faço?

    Um abraço

    • reds

      Amigão, normalmente uso o photoshop.Salve o arquivo como “favicon.ico”.
      Qualquer imagem basta se quadrada, “eu uso a medida 45×45”. Sim pode funciona localmente

  • Olá Cristian… da para testar local sim….é só colocar o caminho da pasta onde esta o Favicon por exemplo: “pasta -> imagens/favicon.ico”… espero ter ajudo você….

  • adorrei o site .

  • powñtoconseguino!
    tem como vc me responde por email como tenho q fazer!
    por favor!

  • Oi, a minha dúvida está neste trecho:

    “Agora que já possui o favicon é necessário fazer o upload da imagem para a pasta principal “pasta raiz” do seu site ou blog e colocar o código dentro da TAG “head” abaixo eu vou dar um exemplo como fazer.”

    Como fazer o upload da imagem para a pasta principal? Quando salve o arquivo .ico veio as imagens fixa e animada, mas não veio o endereço de hospedagem dela. Eu tenho que hospedá-la novamente em algum outro site?

    Agradeço se puder me responder por e-mail.
    Um abraço,

    Amanda

  • gostei muito para nos que estamos entrando neste mundo de blogueiros esta nos ajudando muito

  • Thank you! I just added your blog to the blogroll. Meow!

  • adryele

    cara, caleu mesmo tava doidona com isso. pô mt obrigada mesmo. te agradeço muitão… nem sei mais oque”digitar”… vlw <3

  • eduardo

    cara nao to conseguindo fazer o bixinho funcionar!!!
    tentei fazer em .png nao deu ai fiz em .ico tbm nao funciona!!!
    meu site esta hospedado no uolhosting sera que tem alguma coisa haver?? se possivel me responda por email vlw!!!

    • Eu mandei um e-mail para você, vê se ajuda, qualquer coisa da um toque…

    • Eduardo você recebeu o meu e-mail?

  • abner marques

    eae blz,

    eu fiz tudo certo, eu testei local mesmo, botei o código entre o head e tals, dei o caminho certo do favicon no href do codigo mas mesmo assim não vai, me ajude por favor

  • Margarida Nunes

    Achei a sua explicação legal, bem clara.

  • ECG

    I read a lot of blogs lately and your own is one of the best. I like reading you clear as well as well crafted. Your web page goes straight to my bookmarks. I got some good inspirational ideas reading this.

  • Raniere Carvalho

    poxa man, muito boa tua explicação, sério mesmo!

    valeu pelo post, continue com seu ótimo trabalho! 🙂