English Spain Français Deustsch Italiano Japan Russia Korea
Get this Widget by inWEBblog

Criar e inserir Favicon no blog, usando Favicon.CC

Mas, por que você deveria colocar um favicon no seu blog? Bom, primeiro, entendamos o que é um Favicon e esta questão já estará resolvida.

Segundo a Wikipédia, “Favicons (palavra derivada de favorite (favorito) e icon Ícone) são pequenas imagens no formato *.ico com cerca de 16x16 pixels que ficam guardados em um site para visualização pelo seu navegador. Em alguns navegadores como Internet Explorer, até a versão 6, só exibem os favicons quando um site/blog é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Óper e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons tem alto 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.”

Entendido isto, vejamos, agora, como é muito simples criar e inserir seu favicon no blogspot.

Passo 1: Crie uma imagem (*.png, *.gif, *.jpg) no tamanho de 16x16 pixels e faça o upload para seu site de hospedagens favorito. Para tanto, recomendo o Dropbox (Veja nosso tutorial), pois este aceita TODOS os formatos de arquivos, inclusive a extensão .ico, de que estamos tratando aqui. Anote o url desta imagem.

(Note que esta imagem pode ser o que você quiser, até mesmo uma foto sua!)

Passo 2: Agora, vamos criar, online, a imagem com extensão .ico. Clique no link a seguir e acesse o Favicon.CC. Você será levado à página mostrada abaixo:


Passo 3: Clique em Import Image (Importar Imagem). Você chegará à pagina abaixo:


Passo 4: Clique em Procurar, escolha a imagem no seu computador, depois clique em Upload. Você chegará ao campo de edição de seu favicon, como mostrado a seguir:


Note que já temos uma prévia de como ficará nosso favicon!


Estando a seu gosto, clique em Dowload Favicon. Se não, edite-o, usando o pincel do Color Picker (clique na cor que quiser, depois clique na sua imagem, que fica ao lado esquerdo e esta será editada).

(Você pode, inclusive, criar um ícone animado (Use Animation), mas isto não é recomendável!)

Passo 5: Agora que você já criou sua imagem .ico hospede-a, conforme dito no Passo 1 e anote, também, seu url.


Passo 6: Logado no Painel de seu blog, vá a Layout > Editar Html e procure (Use CTRL + F) pela seguinte linha (Não é necessário marcar "Expandir modelos de widets"):

]]></b:skin>

Passo 7: Cole, logo ABAIXO dela, o código a seguir:

<!—Inicio Favicon -->
<link href='http://url_de_sua_imagem1' rel='shortcut icon'/>
<link href='http://url_de_sua_imagem2' rel='shortcut icon'/>
<!—Fim Favicon -->

Passo 8: Substitua o que está em VERMELHO pelo url de sua imagem .ico e o que está em AZUL pela sua imagem .png, .jpg, etc, conforme você a tenha criado. Salve seu template. Agora, visualize seu blog. Se você fez tudo certinho, seu favicon já pode ser visto.

Pronto! Fácil, não?!...



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Postar um comentário

Comente este artigo!: 2

hock :
abril 07, 2009 5:53 AM

Good posting! more professional web templates at itemplatez.com... its a easy download.

Gerson (Sites & Negócios) :
dezembro 02, 2009 5:08 AM

Belo tutorial. Realmente um favicon é indispensável, afinal ele fixa a marca do site na mente do usuário e toda vez que ele vez aquele ícone ele vai saber que é familiar.

Postar um comentário

Em Comentar como: selecione seu perfil (Nome/URL é o mais comum) e fique à vontade para fazer seu comentário. Critique, dê sugestões e, se for o caso, elogie!

Este blog, agora, é "dofollow", assim, os links nos COMENTÁRIOS estão livres de "nofollow"!
-----------------------------------------------------------------------------------
OBSERVAÇÕES IMPORTANTES | NOTIFICAÇÕES | AVISOS LEGAIS
-----------------------------------------------------------------------------------
1. Os comentários aqui exibidos refletem, exclusivamente, as opiniões isoladas dos visitantes do blog!
2. O Administrador deste blog não se responsabilizará, em hipótese nenhuma, por quaisquer danos que, por ventura, estes venham causar, a quem quer que seja!
3. Mensagens com SPAM ou que não tenham relação com o conteúdo do post não serão toleradas.
4. Para maiores detalhes, leia a POLÍTICA DE PRIVACIDADE e os TERMOS DE USO deste blog!

Obrigado!

Página inicial