Como criar um favicon para o seu site?
Nesse tutorial vamos aprender a criar e a inserir um favicon em um site.
Um favicon é uma imagem que aparece na Barra de Endereços e na aba do site de um navegador. Repare, na imagem a seguir, o favicon 
:
Considerações:
- Um favicon deve ser uma imagem quadrada e possuir geralmente o tamanho de 16×16 ou 32×32 pixels.
- A extensão dessa imagem deve ser .ICO. Pode ser também outras extensões, como gif, mas, a padronizada é a .ico.
Como criar?
Hoje em dia existem várias ferramentas que auxiliam na criação dos favicons. Inclusive existem sites para criar favicons online!
Alguns sites para criar seus favicons são:
- http://www.htmlkit.com/services/favicon/
- http://tools.dynamicdrive.com/favicon/
Nesse tutorial usaremos o http://www.favicon.cc/. Clique no link para entrar no site!
No menu lateral esquerdo, ao clicar em “Create New Favicon”, a tela de criação de favicons que está no meio da janela (quadrados de pintura) é limpa. Nessa área você pode pintar cada quadrado criando o seu favicon, utilizando as cores presentes (Color Picker) no lado direito da tela.
Você pode visualizar o seu favicon observando o favicon do próprio site que muda, conforme você for pintando o seu.
Caso você tenha uma imagem no seu computador e queira usar como um favicon, clique em “Import Image”. Se quiser manter as proporções da imagem, marque a opção “Keep Dimensions” ou se quiser que a imagem se adapte ao quadrado, marque a opção “Shrink to square icon”. Em seguida, clique em “upload”.
A sua imagem aparecerá no quadro de pintura do favicon.
Estando tudo certo, no box “Preview”, voce pode visualizar mais uma vez como o favicon vai aparecer e clique em “Download Favicon”.
O arquivo baixado terá o nome favicon.ico. Salve dentro da pasta raiz que está o seu site. A pasta raíz é a pasta onde está o arquivo index.html do seu site.
Como utilizar um favicon?
O próximo passo é incorporar esse favicon na sua página html.
Abra a sua página html com o bloco de notas, por exemplo, e dentro das tags <head> e </head> insira o seguinte código:
<link href=”http://seusite.com.br/favicon.ico” rel=”shortcut icon” />
<link href=”http://seusite.com.br/favicon.ico” rel=”icon” />
onde seusite é o endereço do seu site.
Salve o seu documento e transfira para o servidor. Lembre-se de transferir o arquivo favicon.ico também, dentro da raíz do seu site.
Pronto! É só visualizar o seu favicon!
<link href="http://painelbr.com/favicon.ico" rel="shortcut icon" /> <link href="http://painelbr.com/favicon.ico" rel="icon" />
Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.
Comentários
Ainda não há comentários.
Escreva um Comentário