Favicon: faça já o seu!

Então, você não sabe o que é um favicon? Bem, favicon é aquele ícone que fica na aba da página. Geralmente, cada página tem o seu. Ainda voando? Está vendo um GA lá em cima? Sim, na aba! Pronto, isso é um favicon. O twitter tem o seu, aquele tzinho azul e o orkut tem o seu, aquela bola roxa/rosa e por aí vai. Então, se você ficou com inveja (ah, mimimi, eu também quero um favicon, não é justo, mimimi), eu vou ser legal e ajudá-lo!

  • 1. Como faz?

Bem, para começar, escolha que símbolo você vai querer que seja seu favicon. Não pode ser nada muito cheio de detalhes, por que senão ninguém vai entender quando olhar (não sei se você percebeu, mas a imagem é bem pequena). Então, vamos supor que você escolheu um coração. Certo. Arranje uma imagem de coração ou faça você mesmo a sua. Uma imagem de favicon deve ter a proporção de 16×16 pixels. Você também pode ir no Pixelgirl Presents e fazer o download de ícones já prontos, em vez de fazer o seu. É claro que um personalizado fica muito mais legal, mas enfim. Então, depois que você fez a sua imagem ou arranjou uma e diminuiu para as proporções de 16×16, é a hora de transformar o arquivo de imagem em .ico.

Ai, Amanda, como faz? Nada de pânico. Tem uns sites muito legais que resolvem o drama rapidinho. O favicon.cc é muito útil, por exemplo. Além de você poder desenhar o seu ícone lá mesmo, se quiser, pode importar sua imagem e fazer o download dela em .ico! É só clicar em import image, importar sua imagem (que de preferência já deve estar em 16×16) e, depois, na barrinha que tem escrito preview, clicar em download! Então, viva, o seu ícone está pronto! Então podemos ir para a parte mais simples: hostear, dar um endereço à sua imagem, para que possa ser lida e seu coraçãozinho ou o que seja possa aparecer bonitinho na aba. Eu, particularmente, aconselho o picpanda, se você não tem onde hostear seu ícone. É muito simples, é só fazer o download e ele abre um página com uma porção de códigos, menos o link direto, que é o que você precisa (é a vida). Então, o que você faz? Clica em view full image e vai aparecer seu íconezinho, lindo e fofo. Então você clica com o botão direito do mouse nele e seleciona ‘copiar endereço da imagem’. Aí é só colar em algum lugar para não perdê-lo.

  • 2. Como coloca?

Enfim, agora está tudo pronto, só falta colocar seu bonitão no seu blog, certo? Certo! Então, tudo o que você vai fazer é copiar o código abaixo e colocar depois da tag <head> do seu código html, certo?

<link rel="icon" href="***" type="image/x-icon" />

No lugar dos asteriscos você coloca  o endereço da imagem – aquele que você copiou, lembra? E tá tudo certo! 😉

Anúncios