Criando um Favicon Personalizado

Índice:

Anonim

Eu vou admitir algo meio geeky. Eu realmente gosto de favicons. Eles são divertidos. Eles são uma ótima ferramenta de branding. E eles são algo simples que os proprietários de pequenas empresas podem fazer para incrementar seus sites e até aumentar a usabilidade para os usuários.

Se você não sabe o que é um favicon, deixe-me oferecer alguma ajuda:

$config[code] not found

Favicons são os mini gráficos de 16 × 16 pixels que representam seu site na barra de endereço, na lista de marcadores de um usuário ou nas guias do navegador. Eles permitem que seus visitantes criem uma conexão visual com seu site.

Arrumado! Como você cria um?

Projete seu favicon:

  • À mão: Abra o seu programa gráfico favorito e chegue a ele. Convém criar um novo arquivo de 16 × 16 pixels e ampliar até que a área funcione OU abrir uma área maior, mas ainda algum tipo de múltiplo de 16 × 16. Quando estiver criando seu favicon manualmente, use algo que represente sua marca com precisão, seja um esquema de cores comum, as iniciais de sua empresa etc. O que você criar terá que enfrentar as rígidas restrições de 16 × 16 pixels.
  • Com ferramentas: Se você é desafiado pelo design (não se preocupe, eu também sou), existem algumas ótimas ferramentas que facilitam até mesmo pessoas como nós a criar ótimos favicons. Por exemplo, o Favicon.cc lhe dará alguma estrutura e permitirá que você crie o seu diretamente no site ou o FavIcon do Pics permitirá que você envie uma foto e gere o favicon para você. Simples!

Salve seu favicon: Ao salvar seu arquivo, reduza para 16 bits e salve como "favicon.ico" se você estiver usando o Photoshop ou "favicon.gif" ou "favicon.png" se estiver usando outra coisa. Se você estiver usando o Photoshop e quiser dar um pouco mais de seu favicon, é recomendável fazer o download do plug-in de formato de arquivo do Windows para salvar no formato ICO.

Envie seu favicon: Conecte-se ao seu servidor e envie seu favicon para a pasta raiz do seu site. Em seguida, adicione o seguinte código HTML à seção head de sua página da Web (entre as duas tags Head) (escolha seu tipo de arquivo):

Atualizar: Quando terminar, atualize seu navegador e verá seu favicon aparecer. Se não, dê alguns minutos. Às vezes é preciso um pouco para sincronizar tudo.

E é isso! Quatro etapas e você tem um ótimo favicon de marca que ajudará os usuários a reconhecer seu site na lista de favoritos ou em seu navegador. Muito simples, certo?

Apenas por diversão, aqui estão alguns dos meus favicons favoritos na Web:

  • Fogos de artifício de Michigan
  • Jeffrey Zeldman
  • Boing Boing
  • Encyclopedia.com
  • Fool.com
  • Blog de SEO de Michael Gray

Algum outro favorito pessoal?

17 Comentários ▼