PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

07/07/2016

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site

 Favicon[5]O que é favicon mesmo?

Atualizado em 07/07/16. Escrito originalmente em 20/06/11.

Muito se falou do novo recurso do Blogger para a personalização do favicon automaticamente no seu blog, mas como criar um favicon exclusivo?

Favicon é um ícone personalizado que fica ao lado do nome da página no seu  navegador da internet. Favicon também é chamado de ícone de navegação…

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Como sabemos, o favicon é um arquivo de imagem com extensão .ico e deve ter de preferência as dimensões em pixels de 16X16 ou 32X32, portanto perfeitamente quadrada…

Para criarmos um favicon com qualquer imagem do seu PC, podemos utilizar FavIcon from Pics, que pode criar ícones estáticos ou animados . Veja como a seguir:

Utilizando o FavIcon from Pics

Acesse o link: http://www.chami.com/html-kit/services/favicon/

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Em favicom from Picture, clique no botão [Selecionar arquivo…].

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Escolha uma imagem e clique em [Abrir]. Você poderá escolher imagens com qualquer dimensão, e não necessariamente quadradas, pois o aplicativo ajustará automaticamente a figura para o padrão .ico.

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Depois de escolhida a imagem clique no botão [Generate Favicon.ico]

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Seu favicon está pronto para ser utilizado com mostra no campo [Your favicon preview:].

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Baixando o favicon estático para o PC

Clique no link [Download only favicon.ico].

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Baixe o arquivo .zip (compactado).

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Agora é só descompactar o arquivo e obter todos os elementos do seu favicon:

  • favicon.ico : imagem .ico estática
  • animated_favicon1.gif: imagem animada

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Customizando seu favicon (usuários avançados)

Se desejar fazer alterações no favicon que você definiu, clique no link [Customize], ou em [Customize colors, text, animation, iPod icons…] que aparece no menu What else you can do.

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

1- Para alterar a cor do fundo do favicon, clique em [Background color] e escolha a nova cor. Clique no botão [OK].

2- Para ativar ou desativar o fundo  transparente da imagem clique em [Make image background transparent (corner colors)].

3- Para adicionar bordas, clique em [Add a border around the image], escreva a cor (em inglês) e clique no botão [OK]. Se desejar excluir depois, clique em [remove].

4- Para converter em favicon em tons de cinza, clique no link [Convert to grayscle /black and white]. Para desativar este recurso depois, clique em [Don’t convert to grayscale].

5- Para adicionar texto com animação, clique em [Add text and edit animation]. Escreva o texto desejado e clique no botão [Ok]. Altere a cor do texto e clique no botão [Ok].

6- Se desejar adicionar ícones para o iPhone ou iPad, clique em [Add iPhone, iPod Touch and iPad icon];

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Veja a página do aplicativo com o nosso ícone customizado:

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Observe que todas alterações feitas são mostradas no ícone de navegação da página do aplicativo

Faça testes usando todas as opções de customização para você conhecer melhor o aplicativo FavIcon from Pics…

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Baixando o pacote favicon customizado

Depois de customizado o seu favicon, você poderá baixar todo o pacote com a imagem .ico, e o gif animado. Para isto clique no link [Download FavIcon Package].

Como criar favicon (.ico) estático ou animado para colocar no seu blog ou site - Visual Dicas

Agora é só descompactar o arquivo e obter todos os elementos do seu favicon:

  • favicon.ico : imagem .ico estática
  • animated_favicon1.gif: imagem animada
  • apple-touch-icon.png: imagem para adicionar no seu iPhone, iPad

image

byALF

4 comentários:

Ivan disse...

vlw mesmo pela dica nota 10 pra vc

Centro dos Acessórios.PA disse...
Este comentário foi removido pelo autor.
byALF disse...

Olá Centro dos Acessórios,

Verifiquei o seu blog http://cdapara.blogspot.com e o ícone está aparecendo perfeitamente no meu browser...

Talvez seja um problema com o cache do seu navegador...

Obrigado pelo contato...

Visual Dicas

Unknown disse...

Resolveu meu problema, e pelo pouco que vi vai resolver mais! Obrigado e parabéns!

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics