anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Como criar um Favicon para a sua página

Se você nunca ouviu falar de Favicons – ou se já ouviu, mas ainda não sabe o que são – aí vai a resposta: Favicon é a contração de duas palavras em inglês (Favorite + Icon, ou em bom português “favorito +ícone”). Na maioria das vezes, os Favicons são imagens simplificadas do logo do site. Porém, para quem pensa que ele é somente mais um atributo visual na barra de endereços, saibam que ele serve também como um identificador a mais para os usuários quando é exibido em uma lista ou em abas, contribuindo para a acessibilidade do site.

– Nota do moderador: o post de hoje foi escrito pelo instrutor Elson Lorena, da Microcamp de Praia Grande. Você pode conhecer melhor o Elson e entrar em contato com ele no seu perfil do Facebook ou deixando um recado para ele diretamente nos comentários do Blog. Boa leitura! 

Se você nunca viu um Favicon, preste atenção na pequena imagem, ou melhor, no pequeno ícone que aparece na barra de endereços ou na barra de títulos da aba do seu navegador. Quando não há um Favicon para exibição, os navegadores exibem um ícone padrão em seu lugar, como o popular ícone da “folha em branco”. É importante observar que a existência de um Favicon não interfere na navegação ou no carregamento da página.

Observe o exemplo do Favicon do Google  na imagem abaixo:

Google favicon

Compreendeu agora? Pois saiba que existem muitas maneiras de inserir um Favicon em sua página: alguns sites possuem aplicativos que permitem criar seu próprio ícone a partir de uma imagem ou ainda a partir de uma imagem existente. Outra maneira – a idéia central deste post – é criar o seu próprio Favicon em um programa editor de imagens como o Photoshop.

Basicamente, Favicons são pequenas imagens no formato .ICO com 16×16 pixels. Sei que isso pode parecer surpreendente para você, mas originalmente o Photoshop não vem com a opção de criar documentos .ICO!  É necessário fazer o download desse formato de arquivo ( e você pode fazer isso no link da pagina do desenvolvedor: http://www.telegraphics.com.au/sw/). Escolha a sua versão do Photoshop (se é 32 ou 64 bits) e baixe gratuitamente o arquivo.

download .ICO

Após descompactar a pasta, você verá o arquivo de Plugin do Photoshop:

Plugin .ico

Você deverá colar esse arquivo para dentro da pasta File Formats do Photoshop, que está em C:Arquivos_de_Programas/Adobe/PhotoshopCS5/Plugins/FileFormats.

pasta File Formats

Importante: se o seu Photoshop estiver aberto durante o procedimento, é preciso reiniciá-lo para poder utilizar o recurso.

Em seguida, abra um documento Novo (Arquivo>Novo) nas configurações a seguir: 16 pixels de largura, 16 pixels de altura e Fundo transparente.

Arquivo novo

Surpreso com o tamanho diminuto do arquivo? Pois é, esse é o tamanho do Favicon. É preciso dar um Zoom (Control +) para poder enxergar melhor a área de trabalho. A opção para fundo transparente é para que o ícone seja bem visualizado independentemente da cor de fundo do navegador, ok?

Quando você copiar o logo do seu site ou empresa para dentro da área de trabalho, vai ficar assustado com a baixa resolução da imagem. Normal, já que para vê-lo como será exibido no tamanho original, você precisa ir ao Menu Principal do programa e clicar na opção Visualizar > Tamanho original.  Isso lhe dará a visão exata do resultado do seu trabalho.

Logo ampliado e original

Salve-o como arquivo .ICO ( no meu exemplo, salvei-o com o nome de favicon.ico).

Salvando

Adicionando no Site

Para adicionar o Favicon à sua página, insira as seguintes Tags dentro do código HTML dentro da sessão <head></head> de sua página:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

Após a Tag  href insira o caminho do arquivo Favicon em sua pasta do site. Onde você vê no código acima a palavra favicon.ico, é lá que está sendo relacionado o documento que criamos. O seu deve ficar igual, a não ser que tenha salvo com outro nome. Se esse foi o seu caso, renomeie com o nome que escolheu. Salve o documento e verá que o seu favicon deverá aparecer logo no carregamento da página. Caso não consiga visualizá-lo no Internet Explorer, adicione-o como um favorito e pronto. Seu Favicon deverá estar visível para os usuários do seu site!

Resultado

Além da opção de criar o seu Favicon no Photoshop, existem boas opções para criar o seu arquivo em sites online. A seguir, dou alguns exemplos de páginas que realizam esse tipo de trabalho com boas opções de personalização e com ferramentas muito amigáveis na hora de criar o seu ícone personalizado:

http://www.favicon.cc/

favicon CC

Talvez o site mais completo na hora de criar o seu Favicon. Nele, você poderá desenhar livremente o seu ícone (se você é um amante de pixel art, vai gostar do recurso), carregar uma imagem (suporta JPEG,JPG, GIF, PNG, BMP e ICO) e até  usar animação. Ponto forte: você pode visualizar o arquivo na própria página enquanto o edita, o que lhe permite verificar o resultado do seu trabalho na mesma hora.

http://www.favikon.com/

Favikon

Muito semelhante ao anterior, esse gerador de Favicons permite redimensionar as imagens antes de salvá-las, coisa que o Favicon.cc não faz. Uma boa opção, e ainda suporta também o carregamento de imagens GIF, PNG e JPEG, mas é um pouco mais limitado quando comparado ao concorrente Favicon.CC.

http://www.genfavicon.com/pt/

Genfavikon

Outra boa opção, faz quase a mesma coisa que o Favikon faz, mas com uma vantagem: tem página em Português. Se você não está acostumado com a língua inglesa, essa é uma excelente maneira de contornar o problema.

Gostaram? Não esqueçam de postar os seus comentários e contar se conseguiram realizar o tutorial. Escreva para nós sugerindo temas e dando sugestões. Não esqueçam também de curtir e compartilhar com os amigos… o Blog do Web Design agradece!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.

Postagem Relacionada

Facebook – Bloqueando solicitações e convites
Quem nunca se irritou com as milhares de solicitações de jogos, convites para eventos ou