Lomeutec - Tutoriais e Informação

Favicon - ícone do lado do endereço do blog

  • Publicidade: Powered by Google

    Favicon é aquele ícone que aparece no navegador do lado do endereço do site ou blog. Tem pouca utilidade prática, mas dá uma aparência mais profissional as páginas. Seu nome origina-se da junção das palavras "favorite + icon". Colocar um favicon em um site é muito fácil, mas em um blog tem que seguir alguns procedimentos.

    Blogueiro

    Partindo do ponto zero, primeiro você vai precisar que o arquivo esteja no formato ICO ou GIF. Se você não tiver acesse http://www.iconj.com/ e nessa página faça o upload de qualquer imagem que esteja no seu computador que tenha menos de 1MB e o site se encarregará de gerar o seu favicon.


    Ao final do upload o site gera instruções e um favicon. Observe que ele mesmo já hospedou um favicon estático para você e já disponibilizou o link também. Se quiser você pode baixá-lo para o seu computador e hospedá-lo em outro lugar, basta clicar em 'Click here to download your Favicon.ico File'.


    Agora se você é um pouco mais exigente e quer um favicon animado acesse http://www.animatedfavicon.com/, faça o upload da sua imagem e se quiser, pode acrescentar um texto que aparecerá na animação.


    Depois de clicar em 'Create FavIcon' a página vai recarregar e um pouco mais abaixo terá uma opção - 'Get It Now' - para você clicar e baixar um arquivo compactado contendo os favicons que foram gerados.


    Esse site só cria, não hospeda, então você terá que achar um servidor para elas, mas o bom é que ele gera um arquivo em formato PNG que você vai precisar. Quanto a hospedagem, uma opção é o site ImageShack, menos para hospedar o arquivo com extenção ICO, já que esse site não aceita esse formato. Mas isso já não é problema, porque você pode usar o arquivo ICO do servidor exemplificado acima. Faça então a hospedagem dos demais. Na hora de fazer o upload do arquivo com a extenção PNG, faça do que tem dimensões 16x16 já que o outro não será necessário.


    Veja na imagem acima que depois que é hospedada no ImageShack, são apresentadas algumas informações sobre o arquivo, mas o que interessa mesmo é o link direto da imagem.

    _______________________________________

    Agora vamos supor que não era nada disso que você queria. Que na verdade você já tinha um arquivo ICO pronto, mas não achou um servidor confiável para colocá-lo. Acesse http://clip2net.com e faça um cadastro.


    Depois confirme pela mensagem que irá receber no email. Logo após será redirecionado para o site novamente e verá uma página como mostrado na imagem abaixo. Clique em 'Upload files via web browser' .


    Na tela seguinte clique em 'Browse Files' e depois em 'Start Uploads'.


    Depois de terminar o upload clique na aba 'Meus arquivos' e pare o mouse sobre o ícone de seta para baixo que estará na frente do arquivo.


    Copie a URL, algo como:

    <a href="http://clip2net.com/page/m45152/5814216">favicon</a>
    Só essa parte azul é que interessa. Cole no navegador para ir à página. Lá você vai clicar com o botão do direito mouse no link 'Baixar arquivo' e copiar o link.


    Depois cole esse link em um bloco de notas e separe somente a parte que nos interessa.
    http://clip2net.com/clip/m45152/1273971634-63202-4kb.ico?nocache=1
    De novo a parte importante é a que está em azul. Pronto, esse "cambalacho" todo foi só para hospedar a imagem e pegar o link, mas veja que esse site onde você acabou de fazer o registro tem uns recursos bem interessantes e não deve ser "jogado às traças" depois disso. Ele oferece um serviço de compartilhamento de arquivos bem útil. Mas agora vamos finalmente implementar o favicon no blog.

    _______________________________________

    Favicon estático

    Logue na sua conta no Blogger, vá em 'Editar HTML' em 'Layout' e faça um backup do seu template antes de começar. Depois aperte 'Ctrl+F' para abrir a caixa de pesquisa do seu navegador e digite:

    ]]></b:skin>
    Logo em seguida cole o código mostrado abaixo adaptando com os endereços onde estão hospedadas as imagens.
    <link href='http://endereçodasuaimagem.ico' rel='shortcut icon'/>
    <link href='http://endereçodasuaimagem.png'/>
    Veja como ficou no meu blog de testes:


    Com isso você já terá aplicado o favicon estático ao seu blog.


    _______________________________________

    Favicon animado (Não funciona no IE)

    Para aplicar um favicon animado procure no código do blog por:

    ]]></b:skin>
    E logo em seguida adicione o código adaptando com o endereço da sua imagem:

    <link href='http://endereçodasuaimagem.ico' rel='shortcut icon'/>

    <link href='http://endereçodasuaimagem.gif' rel='icon' type='image/gif'/>
    Veja como ficou no meu blog de testes:


    Quando você aplica esse código ao seu blog, no IE o favicon fica estático, mas no Firefox funciona normalmente.

    _______________________________________

    Esse recurso é interessante principalmente se o sujeito que visitar o seu blog for como eu que adiciona "trocentos" favoritos ao navegador. Com um favicon fica muito mais fácil achar na lista dos favoritos, fora o visual mais profissional e diferenciado.

    Nilton (LOMEUTEC)
    É formado como técnico em informática com ênfase em análise de sistemas e programação comercial. No entanto gosta mesmo é de fazer publicações para o blog lomeutec.blogspot.com onde compartilha grande parte do pouco conhecimento autodidata que adquire através de experiências, estudos diários e até mesmo de tudo aquilo que descobre enquanto navega despreocupadamente pela internet em seus momentos de ócio. Aqui no LTI acumula funções de publicador, moderador, editor, administrador e o que mais for possível e necessário.