Colocando um ícone no alto do navegador (favicon)

Hoje vou explicar como mudar o ícone que fica no alto do navegador, conhecido como FAVICON. Devemos explicar que a falta do FAVICON além de deixar o website com um layout amador, demonstra uma programação desleixada. Então nada de deixar seu site sem o FAVICON.

1 – O que significa FAVICON?
FAVICON é a sigla para ‘Favorite Icon’, ou seja, é o ícone favorito do proprietário do website. É a marca da empresa no topo do servidor. 

2 – FAVICON personalizado
Para o desenvolvimento de um Favorite Icon personalizado necessitaremos de três ferramentas. São elas:

O CorelDraw será responsável pelo Design do ícone, o website favicon.cc será responsável pela transformação da imagem feita no Corel em ícone e o Dreamweaver será o responsável pela inserção desse ícone no navegador através do código.

2.1 – Desenvolvendo o design no Corel
Realize o design do seu favicon no Corel da maneira que achar melhor, preferencialmente respeitando a proporção de 16px de largura por 16px de cumprimento. Após terminar o layout, aperte CTRL + E no teclado e exporte o design do corel para o formato PNG com a opção de fundo com transparência (isso para não deixar o ícone com aquele fundo branco quadrado).

2.2 – Transformando o arquivo PNG em ícone
Para transformar o arquivo PNG em ícone existem diversas formas, dentre elas a instalação de softwares. No meu modo de ver, a maneira mais fácil e que não requer nenhuma instalação é acessar o website da favicon.cc e importar o PNG pelo site. O passo-a-passo é descrito na imagem abaixo.

2.3 - Inserindo o código

Para inserirmos o ícone recém criado no site, utilizaremos um editor de código qualquer. Devemos inserir o código abaixo entre as tags head do nosso HTML.

< link rel="shortcut icon" href="caminho_para_o_icone" type="image/x-icon" />

2.4 – Resultado Final

Após a conclusão dos passos acima, apertamos F5 na nossa página e o resultado final será parecido com esse:

3 – Conclusão

O FAVICON é um detalhe que muitas vezes é ignorado pelos programadores, mas que é fundamental para o complemento do design e harmonia da página.

Thiago Boaventura é o criador desse post. É Técnico em Informática pelo Cotemig/MG desde 2007. Atua como Webdesigner em Divinópolis/MG. É editor do site Webdesign em Foco (http://www.webdesignemfoco.com/blogs)