Depois de muita gente ter aprovado o meu post com as colors eu fiquei empolgadissima com vces e resolvi então fazer esse tutorial suuuuper facil de como criar o seu favicon personalizado, sem usar o photoshop ou qualquer outro programa de edição, ou seja, qualquer um pode fazer.
Pra quem não sabe, favicon é aquela imagem pequenininha que fica na aba do local onde você está, ou ao lado do endereço (onde a gente digita o site). Os favicons animados (tipo gifs) só funcionam no firefox, então eu recomendo que façam normais mesmo, pra que todo mundo possa ver.
Bom, você vai escolher, se você quer ou não que tenha um desenho no seu favicon, um coração, uma flor, etc.. no nosso favicon aqui do flog, é um bigode por exemplo... e ai você vai procurá-lo. Dicas de sites que têm esses pequenos pixeis são: 01 | 02 | 03 | 04 Lembrando que é bom pegar um que não tenha movimento e encontre o menor pixel que der, assim vai ter espaço pra que você escreva o nome do seu flog por exemplo.Depois de salvar a pequena imagem, você vai abrir o seguinte site: favicon.cc
Lá, você vai se registrar, como na imagem:
Pra quem não sabe, favicon é aquela imagem pequenininha que fica na aba do local onde você está, ou ao lado do endereço (onde a gente digita o site). Os favicons animados (tipo gifs) só funcionam no firefox, então eu recomendo que façam normais mesmo, pra que todo mundo possa ver.
Bom, você vai escolher, se você quer ou não que tenha um desenho no seu favicon, um coração, uma flor, etc.. no nosso favicon aqui do flog, é um bigode por exemplo... e ai você vai procurá-lo. Dicas de sites que têm esses pequenos pixeis são: 01 | 02 | 03 | 04 Lembrando que é bom pegar um que não tenha movimento e encontre o menor pixel que der, assim vai ter espaço pra que você escreva o nome do seu flog por exemplo.Depois de salvar a pequena imagem, você vai abrir o seguinte site: favicon.cc
Lá, você vai se registrar, como na imagem:
Depois disso, você clica em "Create New Favicon"
Vai Aparecer um quadro amarelo, cheio de quadradinhos riscados em cinza, se você quer que o seu favicon tenha a imagem que você escolheu, você vai em:
"Import Image" na mesma aba que você mecheu até agora (no lado esquerdo). Aí você Clica em Escolher Arquivo, encontra ele, abre e Upload.
Agora você tem um Color Picker, o quadro de desenhos e pode conferir como vai ficar o seu favicon na aba do site onde você está o desenhando.
Como vocês podem ver acima, a figura que eu escolhi, do Noel, era muito grande, entao eu usei o Move e coloquei ela pro lado, deixando só metade a mostra. Usando o lápis eu escrevi o primeiro nome do flog do lado. :) Você pode escrever o que quizer, se couber é claro. E com o tempo você vai aprendendo a fazer os pixeis direitinho.
Terminando de desenhar o seu favicon, em baixo do quadro de desenhos você vai ter outra aba, chamada "Preview" onde você pode ver também como está ficando o seu favicon, você vai clicar em "Publish under an open license".
Você vai dar um Título, uma descrição e colocar alguma tag, que pode ser tudo igual. hehe Aí você dá ok, dai vai aparecer o favicon aumentado, o tamanho original do lado e etc, aí você vai e clicar em cima do nome dela, vai aparecer uma aba do lado que chama Options, onde vce vai clicar em: "Download Favicon". Primeira parte ok. agora vem a segunda que é curtinha :)
Vou explicar porque a segunda parte é tão importante: porque o FlogVip não aceita nenhuma imagem ou nada no formado .ico, que é o caso do favicon, então a gente tem que converter o nosso favicon para png, que é o unico jeito de aparecer no flogvip. Eu encontrei um site que faz com que isso seja a coisa mais mole do BRASIL!
Clique aqui para abrir o site.
É super simples... você vai em escolher arquivo, vai encontrar o seu favicon salvo, e vai apertar em Convert! Agora la em cima vai ter assim: Your new PNG, e em baixo o link pra você baixar "Click to download". Depois de baixar é só hospedar, em qualquer lugar que você costuma hospedar. Pra quem não costuma hospedar nada é bom usar o http://tinypic.com/ é fácil. Então você vai pegar o link, e colocá-lo no local indicado, lembrando que pra funcionar você tem que tirar todos os asteriscos (*): <*link icon="AQUI VOCÊ COLOCA O LINK DA SUA IMAGEM QUE ACABOU DE HOSPEDAR" href="favicon.ico*"><*link rel="icon" type="image/gif" href="AQUI VOCÊ TAMBÉM COLOCA O LINK DA IMAGEM QUE ACABOU DE HOSPEDAR"*>Agora é só colocar no post e pronto!
It"s my party and I cry if I want to!