22/09/2015

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)






{ 1 comentários.... read them below or add one }

- Copyright © Segredos da Informática - Skyblue - Powered by Blogger - Designed by Johanes Djogan -