13 de outubro de 2011

Como criar um favicon.ico no Photoshop

Se você observar na barra de endereços do seu navegador, ao lado esquerdo de onde está o nome do site, verá um pequeno ícone. Esse ícone é o favicon, ou seja, o favorite icon (icon favorito) - utilizado para representar o site no browser, nos bookmarks (favoritos) ou no desktop do computador (caso o utilizador tenha arrastado o ícone do browser para o desktop).


Veremos como criar um favicon personalizado utilizando o Photoshop:
  1. Primeiramente, faça o download do plugin para versões windows nesse link.
  2. Descompacte o arquivo baixado e copie o ICOFormat.8bi para a pasta File Formats dentro de Plug-Ins que está dentro da pasta onde o programa Photoshop foi instalado.
  3. Com o plugin já instalado, abra no Photoshop a imagem que deseja transformar no favicon.ico, e reduza-a para o tamanho de 16×16 ou 32×32 pixels.
  4. Vá ao menu Image » Mode e certifique-se de que está a trabalhar no modo RGB.
  5. Se a imagem que está sendo manipulada no Photoshop possui um fundo independente do resto da composição – por exemplo, uma esfera vermelha sobre um fundo preto – exclua o layer (camada) do fundo, para que a esfera fique sobre um fundo transparente – indicada no Photoshop por um fundo quadriculado.
  6. Vá ao menu File » Save As e escolha o formato ICO. Nomeie o ficheiro como favicon.ico.
  7. Durante o processo de gravação do ficheiro ICO, ser-lhe-á perguntado que tipo de imagem deseja criar. Escolha o tipo favicon.ico.

Caso esteja querendo modificar o favicon de um site que esteja desenvolvendo:

Transfira por FTP o ícone para a raiz do seu site. Apesar de poder colocá-lo em qualquer directório, o local mais indicado é a raiz do site, a menos que, por alguma razão, não o possam colocar lá.


No código HTML da página do seu site, acrescente as seguintes linhas antes do tag </HEAD>


      <link rel=”icon” xhref=”favicon.ico” type=”image/x-icon” />
      <link rel=”shortcut icon” xhref=”favicon.ico” type=”image/x-icon” />


PRONTO! Basta agora carregar a página ou fazer um bookmark e vai ver o ícone. O Firefox, inclusive, mostra o ícone nos tabs.

Muito mais dicas no Efeitos Visuais

4 comentário(s):

cara explica direito pow
vc só ensinou a criar icones isso qualquer um sabe, quero saber como colocar no blogger usando o link do blog ?????

Sinistro, o objetivo do post é mostrar como criar o ícone, o próprio titulo ja diz.
Para colocar no blog, siga esse tuto: http://www.ferramentasblog.com/2010/02/como-trocar-favicon-blogger-wordpress.html

sigam aiii http://superpconline.blogspot.com/

http://www.facebook.com/pages/Promiscuidade/324948047610351


CURTAM MINHA PAGINA!!!!!!

Postar um comentário