quinta-feira, 7 de janeiro de 2010

Como criar e incluir um favicon em seu Blog no Blogger.com

É provavel que você já tenha percebido que ao adicionar o endereço de alguns sites no "Favoritos" do seu Internet Explorer aparece um ícone. Este ícone normalmente é a logomarca do site. Ele também fica na barra de endereços quando você está acessando o site. Esta pequena imagem é chamada de favicon.

Você também pode utilizar este recurso no seu site. Basta colocar um arquivo de ícone chamado favicon.ico no mesmo local onde está publicada a primeira página do seu site.

Para quem ainda não tem um favicon, basta criá-lo no editor de imagens de sua preferência, no tamanho de 16 x 16 px e hospedar na web (ImageShack, PhotoBucket e etc). Existem também sites especializados na criação e distribuição de favicons. (Exemplo: favicon.cc)


Você pode criar um arquivo .ico utilizando um software de criação de icones ou utilizando os serviços de um site que possa fazer isto para você. A primeira coisa a fazer é ter em mãos uma imagem da sua logomarca.

Existem vários sites que criam um favicon a partir de uma imagem segue a lista :

http://www.html-kit.com/favicon/
(Recomendado)
http://favicon.ru/en/
http://www.degraeve.com/favicon/
http://www.favicongenerator.com/

Entre no endereço http://www.html-kit.com/favicon/, em "Image to Use" selecione a imagem da sua logomarca no seu computador e clique em "Gerate favicon.ico".

Você também tem a opção de gerar um favicon com a sua foto do perfil do twitter basta colocar seu username do twitter e clivar em "Gerate favicon.ico".

Apés isso uma página será aberta onde você já poderá ver um exemplo do icone com sua logomarca que acaba de ser criado. Clique em "Download Favicon" para baixar o arquivo .zip que armazena o favicon.ico que acaba de ser gerado.

Você ainda tem as opções de criar um favicon animado , mudar o backgroud da imagem e colocar borda em volta da imagem.

Agora você precisa hospedar o favicon.ico em algum local recomendo o Imageboo , para que ele apareça nos 4 browsers mais usados recomendo criar também uma imagem no formato .png que pode ser hospedada no Imageboo , Imageshack , Photobucket e etc...

Agora, vamos entrar no html do template e procurar por :

]]>< /b:skin>


Em seguida cole o código abaixo :


< link href='URL_DA_IMAGEM_ICO' rel='shortcut icon'/>
< link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>
< link href='URL_DA_IMAGEM_PNG' rel='apple-touch-icon'/>
< link href='URL_DA_IMAGEM_PNG' rel='shortcut icon' type='image/x-icon'/>



Obs.: Altere (URL_DA_IMAGEM_PNG) para o endereço de onde a imagem está hospedada.

Vamos visualizar o template e, se tudo estiver bem, salvar. Após isso o seu favicon está pronto e visivel para todos!

Até mais!!!
 
BlogBlogs.Com.Br