Criando um favicon e instalando no servidor

Hoje vamos criar um Favicon.

É um ícone de 16px por 16px que se coloca em um site para que ele apareça na barra de endereços quando acessado. O nome Favicon é a abreviação de “Favorites Icons”. Ele serve para dar um toque pessoal ao seu site mostrando um pequeno ícone na barra de endereços do navegador ou até mesmo nas abas do lado do título da janela. Geralmente uma pessoa quando está navegando em um site e tem aberta em seu navegador diversas abas dele, ela se orienta pelos Favicons, então é bom personalizar o seu site com ele.

Note na imagem que eu estou com o Facebook aberto, o Hotmail e outras abas do site do Maujor. Todos usam favicons personalizados e facilitou muito a minha navegação.

 



Agora que você já sabe o que é um favicon, vamos começar a criar a imagem que transformaremos em um favicon no Photoshop, mas antes, instalaremos um plug-in no Photoshop para que quando formos salvar a imagem, o Photoshop disponibilize a versão *.ico, em “Save as”.

1. Entre no site www.telegraphics.com.au/sw e baixe o Plug in “ICO format”.

 


 

2. Descompacte, copie o arquivo e cole no diretório correspondente a formato de arquivos do programa Photoshop, no seu computador. No meu é Disco Local / Arquivos de programas / Adobe / Adobe Photoshop cs5 / Plug-ins / File Formats.

 

 

Reinicie o Photoshop.

3. Quando você for salvar algum arquivo DO TAMANHO DE UM ÍCONE (16px x 16px etc.) Vai aparecer essa opção “.ICO”  em “Save As”.

 

 

4. Agora começaremos a criar a imagem. Criaremos um novo documento (Ctrl+N) que tenha as mesmas dimensões  (ex 100px x 100px, 150px x 150px etc.). Vou criar um de 100px x 100px que é pra quando formos diminuir para a dimensão 16px x 16px não deforme a imagem.

 

 

5. Coloque a imagem que você quer ver no favicon, no Photoshop. Eu, como criei a imagem no Illustrator vou trazer ela para o programa, mas você pode fazer ela aí mesmo no canvas 100px x 100px do Photoshop.

Usei “File” / “Place” para escolher uma imagem que fiz.

 

6. Redimensionei usando Ctrl+T e optimizei a imagem usando “Filter” / “Sharpen” / “Unsharp Mask”.

 

 

7. Nessa opção fiz alguns ajustes de foco. (Você pode fazer isso quando redimensionar para o tamanho 16 px x 16px, que é quando geralmente aparece defeitos de foco.).

 

 

8. Escolha “Image” / “Image Size” e na caixa que aparecer, escolha as dimensões 16px x 16px. Tenha certeza de que a caixa “Constrain Proportions” esteja selecionada. A imagem diminuirá.

 

9. Em “File” / “Save as”, salve o arquivo com o nome de “favicon”. Escolha a extensão “*.ico” para isso.

 

 

10. Coloque o arquivo em seu servidor.

 

 

11. Pegue o código abaixo e coloque dentro da tag <head> do seu arquivo index, no servidor.

<link rel=ASPASDUPLASSHORTCUT ICONASPASDUPLAS</ href=ASPASDUPLAS</favicon.icoASPASDUPLAS />

no meu caso eu tive que colocar o codigo abaixo:

<link rel=ASPASDUPLASSHORTCUT ICONASPASDUPLAS href=ASPASDUPLAS<?php bloginfo(ASPASSIMPLEStemplate_directoryASPASSIMPLES); ?>/favicon.icoASPASDUPLAS />

 

 

Pois como eu uso WordPress, tive que acrescentar o PHP BLOG INFO Directory que é para o servidor ir para o diretório do template no WordPress, porque eu coloquei o arquivo favicon na pasta do tema que estou usando. Mas se você estiver fazendo um site comum só com HTML, basta dizer onde o arquivo está.

Resumindo: em href, no código, diga onde você pôs o arquivo.

Seu favicon estará funcionando normalmente.

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *