20 de março de 2012

Criando favicon e colocando ele no blog

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16x16 pixels que ficam guardados em um site para visualização pelo navegador. 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.

Criando o favicon

Iremos usar a ferramenta FavIcon Generator, o processo é fácil aqui, importe a sua imagem ou crie uma nova apenas usando as ferramentas do site. O legal é que nessa ferramenta tem como criar favicon animado, como se fosse uma gif (no canto inferior da imagem tem a opção de expandir o recurso Use Animation, clique ele e faça como quiser a sua animação de favicon).
Tudo o que você fizer no quadrado da imagem irá aparecer no Preview. Depois deixar do jeito que quiser o seu favicon, localize o botão Download Icon, que está localizado abaixo do Preview.

Upload do favicon

Para colocar o FavIcon no blog precisamos fazer o upload do mesmo para que consigamos o seu link direto. Esse passo é fácil, eu recomendo usar o imageshack. Depois de se cadastrar no site, é chato mas é rápido, você poderá usufruir dos recursos do imageshack, segue abaixo a imagem explicativa:



clip_image002

Após feito o upload você terá seus links, o link que você precisa é o LINK DIRETO. Sua imagem está pronto para ser colocada no blog!

Adicionando o favicon no blogger

  1. Acesse o blogger.com
  2. Clique em Design
  3. Em Elementos da página
  4. Encontre o quadro Favicon e clique em Editar
  5. Abrirá nova página de Configurar favicon
  6. Clique no botão Selecionar arquivo...

    Abrirá uma janela, escolha e clique na sua imagem e depois no botão Abrir, Concluir ou algo nesse sentido.

  7. Clique em SALVAR e, na página que ficou aberta também, só para garantir e não perder o costume...




Adicionando o favicon no WordPress

Envie a imagem com o favicon que você pretende alterar para a pasta onde estão as imagens do seu blog wordpress. Agora clique em "Aparência” > “Editor” e selecione o arquivo "functions.php”. Cole o código abaixo e pronto.

function childtheme_favicon() { ?>
<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/imagens/favicon.png" >
<?php }
add_action('wp_head', 'childtheme_favicon');

Pronto, agora você tem um favicon personalizado e adicionado no seu blog!